I have been learning some neat CSS tricks and thought I'd share them with you guys. Download the attached page, or if you prefer, save the text in the code box as an html file.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #5df;
background-image: -webkit-linear-gradient(top left, rgba(255,255,255,.1) 24%, transparent 24%, transparent 49%, rgba(255,255,255,.1) 49%, rgba(255,255,255,.1) 74%, transparent 74%, transparent);
background-image: -moz-linear-gradient(top left, rgba(255,255,255,.1) 24%, transparent 24%, transparent 49%, rgba(255,255,255,.1) 49%, rgba(255,255,255,.1) 74%, transparent 74%, transparent);
background-size: 100px 100px;
font-family: "droid sans";}
.box{
background-color: #eee;
background-image: -moz-linear-gradient(#fff, #fff 50%, #bba);
background-image: -webkit-linear-gradient(#fff, #fff 50%, #bba);
margin: 8px;
padding: 16px 24px;
box-shadow: #000 0px 0px 12px;
border-radius: 0px 32px;
max-width: 25%;
text-align: justify;
float: left;
overflow: hidden;}
b{color: #b22;}
</style>
</head>
<body>
<div class="box">
This is an example of what can be done with pure CSS3. This page is not getting anything from an online server, everything you see on this page is generated from lines of code in the same file!
</div>
<div class="box">
All these text areas are made with <b><div></b> tags ("divisions" of the html document), divs don't have any style by default but they can be positioned anywhere and given their own style to distinguish them from the rest of the document. The curved corners, shadow and subtle gradient shading are all part of a style assigned to a custom class I've called "box", I can then make divs with the "box" class and they will all share the same style.
</div>
<div class="box">
CSS (Cascading Style Sheets) works in tandem with HTML, with CSS one can redefine the standard styles of HTML elements, thus providing a simple way to apply a consistent style template throughout an entire website.
</div>
<div class="box">
One can also assign styles to the standard tags, as I've done for <b><b></b>, the "bold" tag, and this means every tag of that kind will inherit the style.
</div>
<div class="box">
Since all the styles for this file are in the header, and not an external file, which would be the more organized way to do it, you can view the style rules that create these effects by <b>right-clicking</b> anywhere on this page and selecting <b>View Page Source</b> from the context menu.
</div>
<div class="box">
Try resizing the browser window and see how the divs adjust their size and position on the page. Pretty neat isn't it!
</div>
<div class="box">
Being able to make gradients with CSS is fairly new to me so I'm getting as much practice as I can. The striped background was created with a gradient, a clever trick of putting different colours right next to each other so there is no gradual gradient at all just solid blocks of colour. Each browser has its own version of the gradient attribute, which is bloody annoying because it means I have to write the same thing three or four times to get it to work on all browsers -- I have only done this for Mozilla (Firefox) and Webkit, which Google Chrome is based on, so the gradients wont display in other browsers. It's common for new attributes to start out fragmented like this and then later on the different browsers will converge on a standard.
</div>
<div class="box">
Sometimes these divs leave gaps on the screen, that's because they are being positioned automatically to fill the next available spot but they must maintain their respective order on the page. Obviously, you wouldn't actually make a website like this or it would be silly.
</div>
</body>
</html>
Formerly OBese87.
