Archive for the ‘css’ Category

How To: Resizeable Background Image

CSS Tutorials For Dealing With Background – Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn’t stretch weird). Also, doesn’t cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline img tag.

Resizeable Background Image

How to: CSS Large Background

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

CSS Large Background

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!).

Backgrounds In CSS

Blurry Background Effect

When setting a background image on a page element with CSS, you can control its position with “background-position”, but an often-forgotten trick is that you can control its position behavior with “background-attachment”.Utilizing two images, we can pull off a pretty simple and fun CSS trick I’m calling the “blurry background effect”. Here are the results:

Blurry Background Effect

Mastering CSS background-position

Hi there guys! As you may know, we have published a lot of tutorials to learn how to improve the interaction of our web applications mainly using javascript and jQuery. We have created our layouts for these tutorials using xHTML and CSS and this time the CSS part will be the important thing and not a simple spectator.

Mastering CSS background-position

split backgrounds/a css trick

Sometimes css tricks just work. You hit a certain problem, take a few good minutes to think it over, devise a css solution … and it works. These cases are quite rare indeed, but they do exist. And as these examples are particularly fun to share with others, here goes. This article will demonstrate a little trick splitting a background into two parts while keeping it flexible in width.

split backgrounds

CSS Triple Border Background Tutorial

Learn to create Triple Border Background pages without the need for tables! Use CSS to style beautiful pages for poetry, graphic collections, and many other stylish presentations.

CSS Triple Border Background

The CSS Typography : The Missing Manual – Ultimate Guide to CSS Typography

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

CSS Typography

6 Ways To Improve Your Web Typography

Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

6 Ways To Improve Your Web Typography

12 Examples of Paragraph Typography

These are supporting examples for the blog entry, The Paragraph in Web Typography & Design.Only standard tags have been used. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Paragraph font size is set at 1em (equivalent to 16px if browser font size is unchanged) and line height set at 1.25em. Georgia was used exclusively. No browser specific CSS has been used—any inconsistency in the rendering of line-height, baseline and element positioning has been left for cross browser comparison before implementing.

Examples of Paragraph Typography

beautiful fonts with @font-face

While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10.

beautiful fonts with font-face

Six Ways to Style Blockquotes

The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Six Ways to Style Blockquotes

CSS typography experiment and browser inconsistencies

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS2.1, and modern browser implementations of a couple of CSS3 properties. Along the way a few new browser bugs and inconsistencies were exposed.

CSS typography experiment and browser

How to Size Text in CSS

There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory. Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms.

How to Size Text in CSS

Cufon vs sIFR vs FLIR

Typography is a very important element to design, and it’s quite a shame that for the past decade we’ve resorted to using images to display this element, without having the flexibility to define different fonts outside of the 13 or so web safe fonts. In the past few years, however, we’ve seen a growing trend towards forcing new typefaces on the web. CSS defines a property for browsers to support a property called @font-face which lets the developer define new typefaces and include the original font file for the browser to download and render the site with. Support for this feature has been implemented in Safari already and is due to release with the next versions of Firefox and Opera. Though this is definitely good news and progress in the right direction, a few issues stand in the way

Cufon vs sIFR vs FLIR

Designing Drop-Down Menus: Examples and Best Practices

Great Examples & Tutorials Of Mega Drop-Down Menu – As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.Yes, that’s right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

Mega Drop-Down Menu, Enjoy It Responsibly!

A perfect website is the result of the application of several techniques that come from different fields. The most famous trends in the modern web design are just the perfect combination among rules from design, web usability, user interface design, science behind HTML, CSS and Javascript.A relatively recent trend is the use of mega drop-down navigation menus. They are simple to build and have a great appeal for the users.

Mega Drop-Down Menu

Mega Drop-Down Menus (33 examples)

Mega drop-down menus are characterized by large panels divided into groups of navigation options. By structuring navigation choices through the use of layout, typography, and icons, everything is visible at once which avoids the need to scroll.

examples of Drop-Down Menus

A Trend of Multi Column Mega Drop-down Menus with 30 examples!

The Navigation Menu plays a key role in any website, either it is a drop-down or a simple one. Its ok for small sites with 5 to 6 menu items, you will have more options to present the menu with better navigation by giving good look and feel by taking the latest web trends & usability into consideration.But what if you have a huge portal or a site with lots of content to feature to the visitors of your site? That’s the first and main question comes to every designer and developer before they plan to develop a website. It’s the same case with me – I always dig into different kind of sites like magazine, news, huge portals etc. to find how others are giving better navigation – the different ways/approaches to present the menu by highlighting their key sections/parts of their site.

A Trend of Multi Column Mega Drop-down Menus

Mega Drop Down Menus w/ CSS & jQuery

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

Mega Drop Down Menus w/ CSS & jQuery

How to Make a Mega Drop-Down Menu

Mega drop-down menus are not actually new, but more and more we see them on popular websites and blogs. With the ever increasing quantity of content on the web we have to figure out solutions to display content and navigation but still keep everything usable and provide a good user experience. It’s no wonder mega drop-downs are now used more often.Today we’ll take a look at creating a simple HTML site with a horizontal navigation bar where a menu item will have a mega drop-down attached to it. I used jQuery for the drop-down and some CSS3 for the rounded corners.

How to Make a Mega Drop-Down Menu

Kick-ass CSS3 Support in IE6, 7, and 8

We all know that IE 6,7 not support the new increase CSS3 property, even with IE8 which is not fully ready for CSS3 yet. You know what, there is a script hack that helps you enable CSS3 support in IE (even with IE6) with new CSS3 properties, including: border-radius (rounded), box-shadow ( shadow), text-shadow (the shadow of the text).

Kick-ass CSS3 Support in IE6

Future of CSS: The Flexible Box Model

The Flexible Box Model is part of the CSS3 Specification that doesn’t really get a lot of attention. While everyone’s off checking out how to use selectors, the flexible box model is crying in the corner asking why no one pays him any attention, and rightfully so! The flexible box model has the potential to change the way we design our websites.

The Flexible Box Model

Impossible Things With CSS Now Possible With CSS3

Today will discuss about some basic properties of css3. Last week one of our reader asked me to post an article based on css3 basic and advanced properties so today we come up with some css3 basic properties.

Impossible Things With CSS Now Possible With CSS3

52framework

HTML 5 & CSS3 framework.

Social Icons in CSS3

After Beautiful sunset wallpaper , I came up with some social site icons made in only CSS3.For those icons I have used gradient,radius property.

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!

Searching YouTube for inspiration I stumbled on to the intro of the classic 1967 spider-man cartoon series. While watching I realized that the animation was very basic. It was the paper doll sort of animation that lends itself perfectly to css3. Hmmm… “I could something like that with a little css3″, I thought.

Firefox support for CSS3 multiple backgrounds

James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.

You Can Use CSS3 Right Now

CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today.This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.

30 Essential CSS3 Resources

Web designers around the world are extremely excited about the power of CSS3 and the creative freedom it offers. With that in mind, we’ve rounded up 29 resources for you to learn more.

Quick Tip: Understanding CSS3 Gradients

Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.

CSS3 Linear Gradients

With the advent of CSS3’s comes support for gradients, specifically, linear and radial gradients. CSS Gradients is supported in FF3.6+, Safari 2+ and Google Chrome. In FF3.6, gradients can currently only be applied to an element’s “background-image” or shorthand “background” properties.

Speed Up with CSS3 Gradients

WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

Gradient Buttons with CSS3

I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.

Gradient Tool

You can create cool gradient with just several clicks using this tool and it’s easy to use.

CSS3 Gradient Generator v2.0

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

Web Design Trend Showcase: Letterpress Text Effect

The trend that has become commonly known as ‘the letterpress effect’ has managed to make its way into a range of website designs. The effect itself is often added to text headers and buttons, giving an inset or debossed appearance. Take a look at this roundup of great examples of this trend, and follow on to a mini tutorial outlining how to create this effect in your own designs.

30 Examples Of CSS Text Shadows Out In The Wild

CSS Text Shadows can create a variety of different effects on a website,like being able to create depth, dimension, contrast and so on just with the plain CSS code. Using images to show letterpress effects or text shadows are beginning to be a thing of the past in Web Design. This is new trend in Web design and if you are not using it or are not aware of it you definitely need to see those best examples and start to use these features in your own designs! In order to continue check out – 22 Advanced CSS Text Effects And Web Typography Tips.

13 Websites with Letterpress

A showcase gallery of websites with Letterpress for design inspiration.

10 Examples of Beautiful CSS Typography and how they did it…

Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS.

50 Useful Design Tools For Beautiful Web Typography

Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

CSS Typography: Contrast Techniques, Tutorials and Best Practices

The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. When chosen wisely and used carefully, it can be very effective to support the overall design. There are many outstanding examples of how we can do this, and below you will find some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites.

22 Advanced CSS Text Effects And Web Typography Tips

Typography takes also very important role in good web designs, so I strongly recommend to read articles I featured there as well! Enjoy and get inspired for your new, advanced web designs!

8 Simple Ways to Improve Typography In Your Designs

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.

15 Excellent Examples of Web Typography. Part 1

I have spent the last month searching, stumbling, noting, bookmarking and analysing in a quest to find 15 Excellent examples of Web Typography. I’ve chosen them because they make excellent use of type. Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable.


Kategoriler