Posts filed under ‘Design’

CSS-Cross-Browser CSS Gradient

<![CDATA[

Cross-Browser CSS Gradient

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.

For Webkit Browsers

The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a linear gradient from top (#ccc) to bottom (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

webkit gradient

For Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

firefox gradient

For Internet Explorer

The following filter wlil only be read by IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

ie gradient filter

Cross-Browser CSS Gradient (demo)

Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn’t support the feature.

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

gradient box

CSS Gradient Dropdown Menu

Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)

css gradient dropdown

Internet Explorer Limitations

Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Final Remarks

Please note not all browsers support CSS gradient. To be safe, you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.

Taken from webdesignerwall.]]>

26,04,2010 at 1:37 Yorum bırakın

fail-ure.net : great design, amazing navigations

<![CDATA[
I strongly suggest you to visit this online store…

]]>

10,04,2010 at 19:31 Yorum bırakın

6 Reasons Why Designers Should Code

<![CDATA[I know, I know…none of us creative types want anything to do with coding past the very basic HTML/CSS we need to know to get our designs to the developers.Doing development is something for those programming grunts, those code jockeys, those geeks.Why should we enter the trenches of development when it’s so nice up here with the Photoshop brushes, afternoon tea, and MacPros? ??Because you’ll be a better designer for it. Skeptical? Read on and discover 6 reasons why designers should code…

1. Better XHTML

I’ve worked with and known many designers who knew only the bare minimum needed to get their designs out of Photoshop and into a web format. Oftentimes they would make use of a software program or plugin like SiteGrinder. While these programs keep getting better and better at making compliant code, they still don’t match the human-produced variety.
Knowing how to write your own standards-compliant XHTML will make you a valuable addition to any web team (emphasis on the standards-compliant part). With all the fuss about PHP, ASP.NET, Ruby, and many other languages, people tend to forget that everything ends up being HTML in the end, because that’s what your browser has to have in order to render a page. The more you know about the medium you work in, the better you work in that medium.

2. Better SEO

And while we’re talking about standards-compliant code, we should mention SEO. This is a big buzzword, though not quite as much as it has been in the past. However, what this means is that SEO is becoming a much more commonplace idea of what a website should strive for, instead of just an added special feature for big business sites.
If you can learn to write your own code, you’re much closer to being able to list “SEO Compliant Designs” on your sheet of available services. That means you can charge more, and it’s another badge on your hat.

3. Better Accessibility

Better code and better SEO = better accessibility. Part of of the job of any designer is to present information in a clear and coherent manner, and on the web that means not solely in a visual manner. A shoddily-coded website can be a nightmare to navigate if you’re blind, or even if you’re using a mobile device.
Learning the ins and outs of developing code for accessibility not only allows you have that knowledge as part of your production skillset, but it will also help you to better understand the considerations you should take when designing for accessibility.
Accessibility is a mandate for all government websites, nearly all education sites, and businesses are starting to see the value in it as well. The more people you can reach via your site, the more chance you have of accomplishing your goal, whatever it may be. And that has to be reflected in any successful design.

4. Better Left Side

Being a right-brained creative is great, but giving your left side a workout can spur on creativity of a different nature. The motto at the bottom of the WordPress website is “Code Is Poetry”, and this is because translating a written language to something that can be visually seen is truly an art form.
Learning to write your own code opens up whole new avenues of expression. Developing your technical and analytical abilities can improve your information design, developing wireframes, and create a pathway to work with interaction design. And who knows, it may even improve your math skills!

5. Better Communication

It’s easy to get lost in the techno-jargon used by developers, simply because you may not have been exposed to the type of things they are discussing. Digging in and working with code yourself will allow you to become familiar with the terminology that is used when conversing about the construction of a site.
Being able to speak the lingo will help when you need to communicate with a developer or project manager about how a design should be implemented.

6. Better Design

You can only do so much knowing the fundamentals of design. Typography, color theory, composition, etc. are all fantastic and extremely important skills to know (and know well)…but eventually if you want to excel in your creativity, you must learn the tools of the trade. Painters learn about canvas types, paint compositions, and bristle qualities. Web design is no exception. Learn to code: you’ll be better for it.
Written exclusively for WDD by Ryan Burrell.
Are you a designer that codes? Should all designers learn how to code? Please share your comments below.

Source : http://www.webdesignerdepot.com]]>

03,03,2010 at 2:14 Yorum bırakın

Browse Iphone Apps : They Make Apps

<![CDATA[
A very enjoyable css site that you can find many iphone apps.

Visit the link]]>

01,03,2010 at 0:48 Yorum bırakın


Takvim

Haziran 2017
P S Ç P C C P
« Ara    
 1234
567891011
12131415161718
19202122232425
2627282930  

Posts by Month

Posts by Category