{ CSS TRICKS }

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

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

Monday, March 7, 2011

CSS Standards

Introduction

Cascading Style Sheets (CSS) are there to define the look and feel of one or several (x)HTML documents. By using CSS we separate content from presentation. Anything that is visual should be achieved via CSS (granted the targeted browsers permits that).

CSS should reside in its own document and should only be mixed with HTML when absolutely necessary. Furthermore, CSS should enhance the current markup and not replace it.

Applying CSS to documents.

CSS can be applied to one or several documents in different ways:

1. Linked in the document head via the LINK element
2. Linked in the document head via a STYLE element and the @import directive
3. Added directly to the head via the STYLE element
4. Inline in the HTML element via the STYLE attribute

More At : http://blog.varadesigns.com/?p=164

Friday, March 4, 2011

CSS Menu in 3D Look

Try with the below code

HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS

More at : http://blog.varadesigns.com/?p=152

Thursday, March 3, 2011

Bokeh with CSS3 Gradients

Ever since Lea Verou mentioned about the possibilities of CSS3 Gradients, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. gf3 suggested that the circles would look much better like bokeh. Today, I finally got down to creating them.

DESIGN OF THE BOKEH
I referred to some pictures of bokeh, and these were their defining characteristics:

1. There should be groups of circles with same color (each circle outlined with the more opaque version of the fill). In each group, circles are close to each other.

2. The color transition from one color group to the other can be accomplished with a very blurry second color group radial gradient overlaid on the first group.

Read More At : http://blog.varadesigns.com/?p=143

Tuesday, March 1, 2011

Create a Tasty Website Design With Different Flavor of Colors

In current trend, online presences become very essential for commercial business, for example online e-commerce product store, online gift store, greeting cards websites, clothing website and lot of other vertical websites. According to individuals and businesses the flavors will be different. While creating a website few things need to be taken care like, Nature of business, Age group who going to visit the website, Product or Service type, Pricing of product or services. No one can succeed in business with common website design on the internet. Before a decade, awareness of website design is very less in a general public, but now a day due to the distance and lake of timing, suddenly use of website increased a lot. While creating a website web design company or designer is very important, first always ask for their work portfolio, so you can get the idea of their work and capability.

Read More At :http://blog.varadesigns.com/?p=128

Friday, February 25, 2011

Fade Image Into Another (within a Sprite)

VaraDesigns is a Website Designing and Development Company in Hyderabad - India, providing services like website designing, website redesigning, web hosting, SEO and more.
Website Designing Company India

Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's :hover, change the background-image. It's best practice to combine both images into one and shift the background-position rather than use two separate images, that's the idea of CSS sprites. But what if you want to fade one image into another, not just have an abrupt shift?

The solution there is to create an additional element on top of the original with zero opacity and the background-position already shifted into place. Then on the :hover, fade in the opacity. Here are three ways to do that, using a little arrow graphic.