CSS examples CSSLab Multiple Backgrounds and CSS Gradients CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? background-image: url(…), url(…); For browsers that don't recognize multiple backgrounds, the entire background declaration will be ignored. background: url(…) 0 0 repeat 10px 100px, url(…) 5px 5px no-repeat 5px 5px #FFF; background-image: url(…), url(…); You can declare multiple backgrounds using the shorthand syntax, as well. background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF; Background Size
Web Form Design: Modern Solutions and Creative Ideas | Design Showcase Advertisement Web form is often the main communication channel between visitors and site owners. Feedback is always important which is why it’s necessary to make sure that web forms are easy to understand and intuitive to use. Nevertheless, even in form design one can afford some healthy portion of creativity. Web forms don’t have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. Below we present over 40 (really) beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Also consider our previous article CSS-Based Forms: Modern Solutions1 which lists modern solutions for CSS-based form design. 1. Since web form is probably one of the most important sections on the web-site, it’s necessary for you as a designer to make sure that visitors can easily understand what information they need to fill into the form fields. Swfir3 also uses an envelope as a metaphor. 2. Ok, this is really different.
10 Examples of Beautiful CSS Typography and how they did it... « Web Design Marketing Podcast & Blog 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. Think about how difficult sIFR or images get when you want to replicate that typography or typeface over 100 pages powered by a CMS. If you can get beautiful type via CSS it makes this situation very easy and with out compromise. There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. 1. Coudal Partners small headline Larger Headline You may be surprised to find out that the serif font used is… *gasp* times new roman! 2 + 3. Human Sexuality and the Nuptial Mystery Headline Example 3. Seed Conference On Friday, June the 6th 2008 4. 5. 6. 7.
CSS Remix | A Fresh Blend of the Best-Designed Web 2.0 Sites MicroTut: Centering a Div Both Horizontally And Vertically Martin Angelov While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this MicroTut I am going to show you my favorite involving CSS and jQuery. But first, the basics: Horizontal centering with CSS It is as easy as applying a margin to a div: To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins (you do remember the shorthand declarations in CSS don’t you?). Horizontal and vertical centering with CSS Center a div both horizontally and vertically with CSS is a bit more tricky. By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Horizontal and vertical centering with jQuery As mentioned earlier – the CSS method only works with divs with fixed dimensions. by Martin Angelov Articles
50 Must-Read Resources For Incredible Web Design Web design has become one of the largest online fields with thousands of people pitting their designs against those of others every day. While the field is still young and growing, there are few designers who are recognized by all and have stood the test of time as their designs prevail over all others. Today, I want to share fifty must-read resources if you want to get started on the path of creating incredible web designs. Remember, beautiful designs aren’t made overnight – this is a process that takes time and practice. Sites A lot of times, there are just a few sites out there in which every article is a must-read to learn more about web design. Smashing Magazine – A site devoted to compiling resources for designers, Smashing Magazine is a great place to stay on top of the latest web design trends and news. Popular Articles Noupe – Noupe is a web developer’s paradise of resources. WPCandy – WPCandy is a site all about WordPress, WordPress themes, and WordPress news. Tutorials Articles
How to Apply CSS3 Transformations to Background Images Scaling, skewing and rotating any element is possible with the CSS3 transform property. It’s supported in all modern browsers (with vendor prefixes) and degrades gracefully, e.g. Great stuff. However, this rotates the whole element — it’s content, border and background image. Currently, there’s no W3C proposal for background-image transformations. Fortunately, there is a solution. View the demonstration page… Transforming the Background Only The container element can have any styles applied but it must be set to position: relative since our pseudo element will be positioned within it. We can now create an absolutely-positioned pseudo element with a transformed background. Note you may need to adjust the pseudo element’s width, height and position. Fixing the Background on a Transformed Element All transforms on the parent container are applied to pseudo elements. Again, you will need to adjust the size and position to ensure the background covers the parent container adequately.
7 Principles Of Clean And Optimized CSS Code | CSS Advertisement Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling. But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. 1. If you’re not already writing in shorthand, you’re late to the party. Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!). CSS Shorthand means that instead of using different declarations for related properties… … you may use shorthand properties to combine those values like so: 2. 3.
50 New Useful CSS Techniques, Tutorials and Tools - Smashing Magazine Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. CSS3 Media QueriesCSS2 allows you to specify stylesheet for specific media type such as screen or print. Proportional leading with CSS3 Media QueriesA fluid layout should be responsive to the width of the columns of text. clearfix Reloaded +
10 AJAX-based & PHP WebMail Clients For a Great User Experience | Noupe Mar 11 2009 Employees need to access their email from wherever they happen to be – on the road, at customer sites, remote offices, and at home. WebMail clients allows receiving and sending email messages using POP3 and SMTP protocols through both local and remote mail servers. Providing secure filtering of unsafe content while viewing HTML-formatted email messages. WebMail clients can operate under different popular web platforms (PHP, ASP.NET, ruby on rails, java). Today i wanted to share with you 10 AJAX-based & PHP webmail client that delivers the look and feel, usability and performance of a desktop application. 1. RoundCube Webmail is a browser-based multilingual IMAP client with an application-like user interface. 2. Zimbra provides open source email and calendar groupware software, with a browser-based AJAX client to deliver a rich experience with a message conversation view and visual search builder that makes multi-gigabyte inboxes easier to use. 3. 4. 5. 6. Live Demo 7. 8. 9.