CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
Read More for Examples:
http://blog.varadesigns.com/css3-media-queries/
Sunday, March 11, 2012
Friday, March 9, 2012
How to use CSS3 Orientation Media Queries
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.
Read More At :
http://blog.varadesigns.com/how-to-use-css3-orientation-media-queries/
Read More At :
http://blog.varadesigns.com/how-to-use-css3-orientation-media-queries/
Wednesday, March 7, 2012
CSS3 Create Multiple Columns
It is possible to create multiple columns for laying out text With CSS3 - like in newspapers! with single html tags
Below are multiple column properties:
» column-count
» column-gap
» column-rule
Browser Support
Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
1. column-count :
The column-count property specifies the number of columns an element should be divided into:
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
2. column-gap :
The property specifies the gap between the columns:
div
{
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
3. column-rule : http://www.blogger.com/img/blank.gif
The property sets the width, style, and color of the rule between columns.
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
Read More At :http://blog.varadesigns.com/css3-create-multiple-columns/
Below are multiple column properties:
» column-count
» column-gap
» column-rule
Browser Support
Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
1. column-count :
The column-count property specifies the number of columns an element should be divided into:
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
2. column-gap :
The property specifies the gap between the columns:
div
{
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
3. column-rule : http://www.blogger.com/img/blank.gif
The property sets the width, style, and color of the rule between columns.
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
Read More At :http://blog.varadesigns.com/css3-create-multiple-columns/
Saturday, June 4, 2011
Drill Down Menu for iPad, iPhone
A simple drill down menu for web, ipad, iphone
Create a .html file and paste the below html code in the body location
HTML CODE
<body>
<div id=’box’>
<div id=”menu”>
<div class=”nav”>DRILL DOWN MENU</div>
</div>
<div id=”button” class=’test’>CLICK ME</div>
<br class=”cb” />
</div> </body>
In the .html file copy the total javascript code and place it in HEADER location.
JAVA SCRIPT CODE
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(‘#menu’).hide();
$(‘#button’).click(function(){
$(‘#menu’).slideToggle();
}); });
$(document).keypress(function(e) {
if (e.which == 27) {
$(‘#menu’).slideUp();
}
});
$(document).click(function(event) {
if ( !$(event.target).hasClass(‘test’)) {
$(‘#menu’).slideUp();
}
});
</script>
Create an external .css file and link it with .html file with <link> tag
CSS CODE
Read More
Create a .html file and paste the below html code in the body location
HTML CODE
<body>
<div id=’box’>
<div id=”menu”>
<div class=”nav”>DRILL DOWN MENU</div>
</div>
<div id=”button” class=’test’>CLICK ME</div>
<br class=”cb” />
</div> </body>
In the .html file copy the total javascript code and place it in HEADER location.
JAVA SCRIPT CODE
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(‘#menu’).hide();
$(‘#button’).click(function(){
$(‘#menu’).slideToggle();
}); });
$(document).keypress(function(e) {
if (e.which == 27) {
$(‘#menu’).slideUp();
}
});
$(document).click(function(event) {
if ( !$(event.target).hasClass(‘test’)) {
$(‘#menu’).slideUp();
}
});
</script>
Create an external .css file and link it with .html file with <link> tag
CSS CODE
Read More
Wednesday, May 4, 2011
What’s new in Dreamweaver CS5.5
Some product releases are revolutionary, and some are evolutionary. It’s a bit more rare that they can be both. Whereas the Dreamweaver CS5.5 release may seem simply evolutionary given the “point-five” version number, the features contained within are highly focused to help you spark your own project-based multiscreen revolution, while only requiring a minor evolutionary shift in the Dreamweaver workflows and your own, finely-honed skills as a web pro. With HTML5 and CSS3 driving a new level of cross-device consistency—as well as adding significant new media and design capabilities independently—Dreamweaver CS 5.5 support for both will help you take your projects to a new level, regardless of whether you’re starting with an existing project that needs to become mobile application aware, or diving in on a mobile-specific site or application from scratch.
Rendering and preview
Although it won’t be apparent from reading the back of the box, Dreamweaver CS 5.5 Live View and Design View have both been updated to take advantage of the most current builds of Webkit, the rendering engine powering both the Safari and Chrome desktop browsers, as well as the lion’s share of mobile browsers to boot. This ensures that you get the most representative preview of your projects across desktop and mobile devices—and be able to visually author richer HTML5- and CSS3-based experiences with more confidence than ever before. But enough about the pretty pictures, let’s look at some of the features that will help you exercise Dreamweaver’s visual previews to their fullest extent.
Read More At : http://blog.varadesigns.com/?p=174
Subscribe to:
Posts
(
Atom
)