Archive for the ‘CSS’ Category

Transitions using CSS3

Posted: May 24, 2012 in CSS
Tags: , , , ,

Now you can make transitions in your web elements with css3. There is no need of any flash elements , javascript or jQueries. You can just move or slide your element using css3 styling .

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
Advertisements

Gradient using CSS3

Posted: May 24, 2012 in CSS
Tags: , , , ,

Now you can use gradient styling using css3. No need of using images from your design’s or layout some thing. You can create gradient styling using css3.

Check the below example for gradient styling using css3

#linearBg2 { 
/* fallback */
 background-color: #1a82f7; 
background: url(images/linear_bg_2.png);
 background-repeat: repeat-x;
 /* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
 /* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
/* Firefox 3.6+ */
 background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
 /* Opera 11.10+ */
 background: -o-linear-gradient(top, #2F2727, #1a82f7);
 }

Try it with different styles for your website.

 

Build a responsive WordPress theme from your existing WordPress theme; using CSS3 Media Queries.

A responsive design means a layout that responds well to different screen sizes based on the view-port. Such as iPad, tablets, Smart Phones and Desktop. This tutorial explains how to make responsive theme from your existing wordpress theme css.

What you should already know:
1. How to build a wordpress theme
2. CSS knowledge

To make the theme responsive using CSS media query you have to use the css link tag media attribute value as “screen”.

Please check below example

<link rel="stylesheet" href="{Your css URl}" type="text/css" media="screen" />


and also use the view-port meta tag

<meta name="viewport" content="width=device-width">
 


And then use the media queries in your css

 
/* iPad Portrait */

@media only screen and (max-width: 768px) {
 Your Style here
}

/* iPad Landscape */

@media only screen and (max-width: 1024px) {
Your Style here
}
@media only screen and (max-width: 940px) {
Your Style here
}

/*layouts smaller than 600px, iPhone and mobiles*/
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
Your Style here
}

/* iPhone Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) {
Your Style here
}

/* iPhone Portrait */
@media screen and (max-width: 480px) and (orientation: portrait) {
Your Style here
}