DMCA.com Follow us on Facebook

CSS3 Capabilities and CSS3 Examples

By Tanya Simkin-Reva

CSS is a very simple language whose primary function, is to style your markup (html) in order to make your website look good. A CSS file should be written as a separate document and attached to a html file. Many designers and coders still use inline CSS including styles into the markup, which can sometimes cause conflicts in the coding. A CSS file must be external, and it must be saved as a separate file and linked to the html file. Why must it be separated? Firstly, using an analogy as an example, you never cook rice and schnitzel in the same pot! You will inevitably place them in one plate, but they should always be cooked separately. Secondly, it is simply much easier to declare a style that is applied to multiple html objects only once rather than applying the same style a million times over. Let's imagine, for a moment, that you have 10 pages, 20 blocks with same h1 tag, which gives you 30 h1 tags in total. If you need your h1 tag to be a certain font, certain colour, and a certain line-height on every page and block of your website, wouldn't it be tedious and time-consuming to declare the same style 30 times internally instead of 1 time externally?

Difference between versions

Strictly speaking, there is no such thing as “differences” between CSS versions. CSS3 is the third version of the CSS language, and it arrived with many new properties, but these properties are just additions without any changes to the original model. It isn't like some CSS specification was replaced with something else. Rather, it stayed as it was. A couple of decades ago, we used to have mobile phones that were suitable for just making phone calls. Today, mobile phones can be enhanced with any combination of video and photo cameras, internet access and millions of functional gadgets and application, but the 'call' button simply stays the 'call' button regardless of what additions are implemented.

When new functionalities arrived, they arrived in abundance. They were replete in CSS1, CSS2, and CSS2.1, but now they are at our service. And, now we can often avoid the use of images and, in many cases, even js scripts for animated like effects.

In fact, we can build a whole website without opening Photoshop at all. We can simplify the website structure and have less files our folders. In theory (since everything is relative), we can have a folder of the whole website that contains only 1 CSS file and a set of html files (or xml file[s]). That means no scripts and no images, which results in a lightweight set of files that are rendered and processed by the browser very quickly. Of course, while this is usually not enough for big interactive websites, there are small personal websites, non-profit websites, landing pages, and one-page site-presentations that we can build, solely by using html/css, where they will be full of quasi-graphic elements (like ribbons, shapes, buttons), animations (transitions, fades, bounces), or contain traditionally js-powered objects (sliders, tabbed blocks, modal windows). All of these things are now possible thanks to power of CSS3.

Can we use CSS3 right now?

There is one small problem with CSS3 though. Well, to be honest, the problem isn't so small. Browser support for CSS3 features are, in a way, lacking at the moment. Good browsers like Chrome and Safari do their job well while Firefox is just one step behind, as for Opera... well, we know Opera's devs work hard, so there are no big concerns there. Internet Explorer though...well, Internet Explorer is notorious on many levels. It is, frankly put, a real pain in neck. Presently, IE9 ignores a huge number of CSS3 declarations and is unable to render them correctly–if it renders them at all. We won't even waste time talking about IE8 because CSS3 is a proverbial dead zone in that version. Browsers for desktops, however, do not work the same as those created for mobile phones. If Safari on a desktop computer displays a certain element styled with CSS3 very well, it does not necessarily mean that you will see the same quality on an iPhone.

Take a look at these two screenshots:

safari desktop
Safari iMac
safari iphone
Safari iPhone 4S

On the screenshots above, you will see a pure CSS3 background (the reproduction of the original tartan of the Ramsey clan (Scotland) made with CSS3 gradients). You'll notice that on the desktop it is displayed crisp and clear while on the iPhone it looks blurry. In both cases, the browser shown is Safari.

So, as you can see, not everything is perfect as desired. However, having said this CSS3 support and compatibility on ALL devices will eventually improve and as more progress is made every day. What Firefox could not handle yesterday, today it can handle quite easily. What was lacking in Opera in previous versions is now available with the installation of an update, so there is no reason to worry. We should implement as much CSS3 capability as possible without a fear of compatibility.

What we can achieve with CSS3

Now, we can talk a little bit more about the fun parts of CSS3. As I mentioned above, in many cases we can avoid drawing images in Photoshop and instead opt to use pure CSS. Why not use images? Well, the answer is rooted in practicality. Let's say we need to add some circles to our design. Sure, we can draw them in Photoshop, but what if our client wants modifications? Perhaps he or she will want later a different colour, thicker or thinner borders, lighter or bolder shadows, a different size, and so on. With this in mind, it is obviously much easier and faster to make them with CSS. The list of elements that are able to be created with CSS is endless! Let's take a look at a few examples that were made with CSS3:

Examples Part I (static)

Simple circles

circles
View live demo

How it is done:

Markup:

    
8
5
3

CSS:

/*-----ROUNDED BUTTON----*/
.button{
	float:left;
	margin:0 0 20px 0;
	width:100%;
}
.circle-outer{
	float:left;
	background:#fff;
	border-radius:35px;
	height:70px;
	width:70px;
	margin-right:10px;
	box-shadow: 0 2px 2px #ddd;
	position:relative;
}
.circle-outer:hover{
	top:-1px;
}
a.circle{
	float:left;
	text-decoration:none;
	border-radius:30px;
	height:60px;
	width:60px;
	vertical-align:middle;
	text-align:center;
	color:#f0f0f0;
	line-height:60px;
	margin:5px;
	font-size:2em;
	text-shadow:0 1px 1px #ccc;
}
.orange{
	background:#f83902;	
}
.orange:hover{
	color:#faa992;
}
.green{
	background:#449355;
}
.green:hover{
	color:#73df8b;
}
.blue{
	background:#1d9da2;
}
.blue:hover{
   color:#5dd9de;
}
	

In this example, we gave common class “circle” to every circle in the row and declared styles for the a.circle (anchor). Along with this, we declared three different colours by adding the extra classes "orange", "blue" and "green" to the “circle” class.

3D text with text-shadow

3d text
View live demo

How it is done:

Markup:

    

Hansel und Gretel

CSS:

/*-----3D TEXT----*/
#text{
	float:left;
	width:100%;
	background:#033a68;
}
#text h1{
	color:#f0f0f0;
	font-size:7em;
	text-align:center;
	line-height:1em;
    font-family: 'UnifrakturMaguntia', cursive;
    -webkit-text-stroke: 1px #eee;
    -moz-text-stroke: 1px #eee;
    -o-text-stroke: 1px #eee;
    -ms-text-stroke: 1px #eee;
    text-shadow:
               0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
	

Here we used a subtle 1px text-stroke and text-shadow properties. Shadows colours are set in the rgba colour model (where r=red, g=green, b=blue and a is alpha opacity). Rgba colour model is another new feature added to CSS3 version.

Polkadot background with CSS gradients

background
View live demo (please preview in Chrome, Safari, Opera or Firefox)

How it is done:

Markup:

    

CSS:

/*-----3D TEXT----*/
#background{
	width:100%;
	height:400px;
 
	background: 
    -webkit-radial-gradient(#00170d 15%, transparent 16%) 0 0,
    -webkit-radial-gradient(#00170d 15%, transparent 16%) 18px 18px,
    -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 18px 19px;
  
	background: 
    -o-radial-gradient(#00170d 15%, transparent 16%) 0 0,
    -o-radial-gradient(#00170d 15%, transparent 16%) 18px 18px,
    -o-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    -o-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 18px 19px;
	
	background: 
    -moz-radial-gradient(#00170d 15%, transparent 16%) 0 0,
    -moz-radial-gradient(#00170d 15%, transparent 16%) 18px 18px,
    -moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    -moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 18px 19px;
     
	 background-color:#014225;
     background-size:36px 36px;
	

Custom CSS3 scrollbar for webkit browsers

scrollbar
View live demo (please preview in Chrome or Safari only)

With CSS3 we can achieve a custom look for the browser scrollbar (currently only in webkit browsers Chrome and Safari). We can use webkit pseudo-elements like -webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb and more (7 elements in total) to get this effect. Note: body tag must be absolutely positioned, thus it covers the default scrollbar over and we have the flexibility in stylising our own scrollbar. Detailed information about scrollbars styling methods is available here and here. Note: we can set both vertical and horizontal scrollbars. For horizontal scrollbars we need to set height while for vertical scrollbar we set only the width like in the code given below:

How it is done:

CSS:

html {
   overflow:auto; 
   background:transparent;
}
body {
    position: absolute;
    top: 40px;
    left: 40px;
    bottom: 40px;
    right: 40px;
    overflow-y: scroll;
    overflow-x: hidden;
	margin:0;
	padding:0;
}
/*-----CUSTOM SCROLLBAR---*/
::-webkit-scrollbar{
     width: 14px;
}
::-webkit-scrollbar-track{
     box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
}
::-webkit-scrollbar-track-piece{
	background:#b12b05;
	-webkit-border-radius:4px;
    border:1px solid #f83902;
}
::-webkit-scrollbar-thumb {
    background: #f83902;
    box-shadow: inset 0 0 6px rgba(0,0,0,.5); 
	-webkit-border-radius:4px;
    border:1px solid rgba(255,255,255,.1);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #e44f25; 
}
	

We can set the custom scrollbar not only for the body tag but for some selected block of content as well. In the example below we set scrollbar only for .block while the browser scrollbar stays default. CSS styling will be slightly different. Unlike the previous example there is no need in absolute position of the div with inner scrollbar. However, we need to add the overflow property to the selected block and set it's height. We also need to declare the div name in order to apply the scrollbar to that very div. If we omit to do that, our custom scrollbar will appear on everywhere. Let’s take a look:

scrollbar
View live demo (please preview in Chrome or Safari only)

How it is done:

CSS:

.block{
	float:left;
	width:98%;
	overflow-y:scroll;
	height:394px;
}
/*-----CUSTOM SCROLLBAR---*/
.block::-webkit-scrollbar{
     width: 1.3%;
}
.block::-webkit-scrollbar-track{
     box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
}
.block::-webkit-scrollbar-track-piece{
	background:#b12b05;
    border-radius:4px;
    border:1px solid #f83902;
}
.block::-webkit-scrollbar-thumb {
    background: #f83902;
    box-shadow: inset 0 0 6px rgba(0,0,0,.5); 
    border-radius:4px;  
    border:1px solid rgba(255,255,255,.1);
}
.block::-webkit-scrollbar-thumb:window-inactive {
	background: #e44f25; 
}
	

Next - CSS3 Examples Part II and Part III (animations)


Copyright © 2016 HTML5 Templates Dreamweaver.com