May 12th, 2010
Now that CSS3 is starting to penetrate, web Design has many exciting additions are worthy of mentioning. One being CSS rounded corners. In the past and most likely the present in order to get the widest penetration with older browsers, web designers and front-end developers used tricks or work-arounds to get the rounded corner implemented with few or no graphic images. After trying many things this one sticks out as one working very well!! http://dillerdesign.com/experiment/DD_roundies/
But if your into CSS3 there are some options for borders in CSS3, of which one is border-radius. Both Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.
The code for this example above is actually quite simple:
(The example below is an image so all browsers can see it)
<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
These different corners can also each be handled on their own:
(The above example is an image so all browsers can see it)
These are handled by this:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Share and enjoy this web design link:
Posted in web design, web design principles | View Comments
May 10th, 2010
What is a sprite?
A sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? I like this because it means no use of image preloading for image rollovers or hover states. Also because it make your website design lighter!
This isn’t anything new A List Apart wrote about this back in 2004, but with page-speed being a concern these days, regarding a faster page load could mean better rankings in Google, and it’s an easy way to optimize a website design.
Below is an example of an on and off state for a button in a single image.
What this image shows is the normal state and the hover state of a button. What we want to do is just add a line of code to your CSS like this: background-position:0px -26px; on the hover state and it will shift the position of the image.
A sprite would be just like this, but contain all or most of your button on and off states, little icons, header graphic, images for your navigation buttons, graphic headers and basically anything that can be ganged up into one image.
Why is this better than a whole bunch of small images ?
Wouldn’t it be faster to load a whole bunch of small images ? Isn’t everyone slicing up images trying to get them to load faster ? Nope! Those are old school techniques that never really got us anywhere (so excuse us for mentioning something that you already know, but it’s just a healthy reminder! and since Google and page speed have been mentioned a lot in the web design and web development news lately — and having better rankings involves faster page load speed) So loading a bunch of small images really just fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is. So in short… reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
If you want to check a site and see how you can create a sprite from the existing website design — a good choice is SpriteMe — it will open up an overlay over the right side of your browser and help you make a sprite.
Share and enjoy this web design link:
Tags: CSS, sprites, website design
Posted in web design | View Comments
May 9th, 2010
There are many ways form website designers and front-end developers to get more fonts on a web page than just the standard fonts that we have been using in HTML. CSS @font-face has been around since CSS2 and IE5, but is becoming much more wide spread with CSS3.
Here’s the skinny on @font-face design and implementation:
Supported browser Versions Include: IE V.5+, Mozilla/Firefox V.3.5+, Safari V.3.1+, Opera V.9+, iPhone V.3.1.
But this is true only if you are including .TTF, .OTF, .EOT and .SVG font formats… so you should also always include common fonts and a default font.
h3 {
font-family: yourNameForTheFont, curlyQ, arial, helvetica, sans-serif;
}
Including all those different font types, making your fonts visible to the widest possibe audience might seem daunting but font squirrel has a fine solution. Font Squirrel will generate the fonts you need to upload so it can work across all browsers and platforms:
http://www.fontsquirrel.com/fontface/generator
Because of font licensing concerns, web designers cannot simply embed any font on your website. Your best bet is to get a free font. There are lots of great free fonts out there, and lots of sites have lists of free fonts that you can use with @font-face. One very good free font site is fontex.org.
Below you will find a link that explains all the steps necessary to make @font-face happen
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
A nice resource for web design is this 30 beautiful and free fonts you can use with @Font
http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face/
Share and enjoy this web design link:
Tags: @font-face, HTML fonts
Posted in web design | View Comments
May 9th, 2010
An HTML and CSS framework that allows website designers and front-end developers to create forms more easily.
Did you use to spend a lot of time aligning fields and calculating margins and paddings in a quest for a perfect form? No more!
http://www.formee.org/
Share and enjoy this web design link:
Tags: front-end web development, HTML and CSS Forms
Posted in web design | View Comments
