Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged css techniques

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
jdr santos

CSS Discuss - 9 views

css-discuss.incutio.com/...Main_Page

CSS wiki reference tutorials resources web design

shared by jdr santos on 24 May 11 - Cached
  • This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets). Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.
  • jdr santos on 24 May 11
     
    This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets). Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.
Kashif Mehmood Mughal

50+ Useful CSS Professional Techniques | Dzinepress - 6 views

www.dzinepress.com/...ul-css-professional-techniques

CSS Techniques Tutorials Advanced CSS3 HTML XHTML DHTML

shared by Kashif Mehmood Mughal on 06 Nov 09 - Cached
  • Kashif Mehmood Mughal on 06 Nov 09
     
    As we know most of the Web designers and developers only scratch the surface of the potent language that is CSS (cascade style sheet), like programming languages, CSS has a quite simple learning twister, normally being used more often in every web project. CSS as language giving many advantages even working in table based design or table-less designs, most of the time our designed pages can easily change after replace a css file with another one. When we working on latest trends, Tab Navigation has been one of the essential element in any contemporary web layout. In order to make sure visitors can properly navigate through the website through our used techniques, here in listed CSS stuff we offering some best and most useful Cascade style sheets with source files which can help for more inspiring developments.
Jochen Burkhard

Start Using CSS3 Today: Techniques and Tutorials - Smashing Magazine - 0 views

www.smashingmagazine.com/...today-techniques-and-tutorials

css3 webdesign tutorials techniques css Roundup

shared by Jochen Burkhard on 18 Jun 10 - Cached
  • Jochen Burkhard on 18 Jun 10
     
    We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn't make sense to use CSS3 today. Yes, Internet Explorer doesn't support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file).
awqi zar

CSS3 Techniques You Should Know - 13 views

sixrevisions.com/...ss3-techniques-you-should-know

article css3 css webdesign techniques web design Tutorials

shared by awqi zar on 22 Mar 10 - Cached
  • awqi zar on 22 Mar 10
     
    Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I'll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!
Kashif Mehmood Mughal

Really Useful CSS Tips and Tricks for Web Designers and Developers | Tutorial Lounge - 2 views

www.tutoriallounge.com/...r-web-designers-and-developers

CSS Tips and Tricks Tutorials Web Developers Designers HTML xHTML

shared by Kashif Mehmood Mughal on 20 Jan 10 - Cached
  • Kashif Mehmood Mughal on 20 Jan 10
     
    CSS (Cascading Style Sheet) is most important language technique for web designing and development, we mostly prefer in our modern designs where some new techniques also introduce like CSS3 and some third party scripts as well which can help in latest website designs. Now CSS offering many advanced advantages which helping in table-less and web 2.0 designs, as you know number of websites offering tips and tricks about CSS, but we choose some very useful techniques which you cannot ignore as designer or developer.
Jochen Burkhard

Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine - 0 views

www.smashingmagazine.com/...art-2-the-essential-techniques

CSS3 HTML 5 Tutorial Essential Layout Web Design

shared by Jochen Burkhard on 06 May 10 - Cached
  • Jochen Burkhard on 06 May 10
     
    In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today's most successful CSS-based web pages.
Jochen Burkhard

20 CSS3 Tutorials and Techiques for Creating Buttons - Speckyboy Design Magazine - 0 views

speckyboy.com/...techiques-for-creating-buttons

CSS3 Buttons Tutorial 3d Ribbon

shared by Jochen Burkhard on 15 Mar 10 - Cached
  • Jochen Burkhard on 15 Mar 10
     
    ♻ Retweet In May last year we published an article entitled 22 CSS Button Styling Tutorials and Techniques, it proved to be pretty popular, and the most amazing thing about that post is that none of the tutorials even touch on the subject of CSS3.. What a difference a year makes! Of course CSS3 never rolled out last year, it has been around for a long time without ever entering mainstream web design. That was until last year when support arrived from the web browsers Safari, followed by Firefox and then Chrome. And CSS3 has been gaining momentum ever since.
Jochen Burkhard

sixrevisions.com by Mobify - 0 views

m.sixrevisions.com/...ss3-techniques-you-should-know

CSS3 Web Design

shared by Jochen Burkhard on 22 Mar 10 - Cached
  • Jochen Burkhard on 22 Mar 10
     
    Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I'll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!
Jochen Burkhard

How to Create a Ribbon Banner Navigation Bar with HTML/CSS3 | Webdesigntuts+ - 0 views

webdesign.tutsplus.com/...igation-bar-with-pure-htmlcss3

css3 ribbon banner webdesign html navigation

shared by Jochen Burkhard on 18 Apr 11 - No Cached
  • Jochen Burkhard on 18 Apr 11
     
    "As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done. As it turns out, it's actually quite easy, using only simple, semantic HTML and some CSS3 trickery thanks to the magic of the the border-width property. The only caveat: As with all new CSS3 techniques, it can act a bit wonky in some IE browsers… we'll address that at the end of the tutorial. Here's how:"
  • Jochen Burkhard on 18 Apr 11
     
    Future in navigation style design has begun :-)
Soul Book

CSS techniques I use all the time - 0 views

www.christianmontoya.com/...-techniques-i-use-all-the-time

blog css tools webdesign typography design fonts text layout web layouts webdev reference code coding

shared by Soul Book on 01 Apr 10 - Cached
  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  • Soul Book on 01 Apr 10
     
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
Jochen Burkhard

10 CSS3 Properties you Need to be Familiar with | Nettuts+ - 0 views

net.tutsplus.com/...s-you-need-to-be-familiar-with

css3 properties Tutorial Important

shared by Jochen Burkhard on 02 Dec 10 - No Cached
  • Jochen Burkhard on 02 Dec 10
     
    "We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged! The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That's up to you to decide. However, always remember that websites needn't look identical in every browser. At the conclusion of this article, we'll work on a fun final project."
  • Jochen Burkhard on 02 Dec 10
     
    Very useful and fun to read.
Jochen Burkhard

Modern CSS Layouts: The Essential Characteristics - Smashing Magazine - 0 views

www.smashingmagazine.com/...-the-essential-characteristics

CSS3 HTML 5 Tutorial Essential Layout Web Design

shared by Jochen Burkhard on 06 May 10 - Cached
  • Jochen Burkhard on 06 May 10
     
    Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we're finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.
Jochen Burkhard

Build Awesome Practical CSS3 Buttons | Nettuts+ - 0 views

net.tutsplus.com/...awesome-practical-css3-buttons

howto css3 nettuts awesome Buttons

shared by Jochen Burkhard on 22 Nov 10 - No Cached
  • Jochen Burkhard on 22 Nov 10
     
    "What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I'll show you how in today's video tutorial. "
  • Jochen Burkhard on 22 Nov 10
     
    A nice video-tutorial in CSS3 Buttons, yum yum...
Jochen Burkhard

Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks - 0 views

css-tricks.com/scrollfollow-sidebar

web css tutorials webdesign Web-Application Sidebar Scroll

shared by Jochen Burkhard on 30 Nov 09 - Cached
  • Jochen Burkhard on 30 Nov 09
     
    "Really simple concept today folk! A sidebar that "follows" as you scroll down a page. There are a number of ways to go about it. We'll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick. "
Jochen Burkhard

Quick Tip: Pure CSS Text Gradients | Nettuts+ - 0 views

net.tutsplus.com/...ck-tip-pure-css-text-gradients

css tip Tutorial text nettuts Quick Tip

shared by Jochen Burkhard on 01 Jun 10 - Cached
  • Jochen Burkhard on 01 Jun 10
     
    With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don't currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect - at least in webkit browsers! I'll show you how in today's video quick tip.
Vernon Fowler

The top 10 CSS3 techniques | Feature | .net magazine - 3 views

www.netmagazine.com/...top-10-css3-techniques

css css3 techniques webdesign tutorials design web browser fonts colour borders shadow text gradient images transitions

shared by Vernon Fowler on 08 Aug 11 - No Cached
  • Vernon Fowler on 08 Aug 11
     
    Denise Jacobs reveals her top tips on how to use the most exciting CSS3 properties - and provide fallbacks for older browsers
awqi zar

40 jQuery and CSS3 Tutorials and Techniques - Speckyboy Design Magazine - 8 views

speckyboy.com/...-css3-tutorials-and-techniques

design programming javascript tutorials jquery web design webdesign

shared by awqi zar on 12 Jul 10 - Cached
  • awqi zar on 12 Jul 10
     
    In this article you will find a comprehensive selection of tutorials and techniques that make use of some exciting and fresh CSS3 properties and injected this with some innovative jQuery.You will some truly creative image galleries/sliders, a marvelous selection of innovative navigation techniques, a handful of original form solutions and the rest of the tutorials cover almost all aspects of web design. Hope you find them useful.
Jochen Burkhard

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery | Nettuts+ - 0 views

net.tutsplus.com/...enu-with-html5-css3-and-jquery

nettuts CSS3 HTML 5 HTML5 jquery navigation menu javascript Tutorials webdesign

shared by Jochen Burkhard on 03 Jun 10 - Cached
  • Jochen Burkhard on 03 Jun 10
     
    In this tutorial, we'll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We'll also use jQuery to handle the effects and add the finishing touches for us.
Arch Aznable

Creating Soft Customizable Pressure Buttons in CSS | Blogfreakz - Web Design and Web De... - 0 views

blogfreakz.com/...izable-pressure-buttons-in-css

css web web design design web development development resources

shared by Arch Aznable on 27 Jun 12 - No Cached
  • Arch Aznable on 27 Jun 12
     
    One of the very interesting techniques in creating buttons with CSS is by Johnny Simpson . His creation is these sleek pressure style buttons that you may find useful in your site. He mainly used multiple box shadows to add depth instead of gradients because it has more solid ground when it comes to support. They work well on the latest versions of all major browsers.
Vernon Fowler

Best Practices for Speeding Up Your Web Site - 1 views

developer.yahoo.com/...rules.html

performance best practices web web site site webdesign web design

shared by Vernon Fowler on 09 Sep 12 - No Cached
  • Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size. Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8. "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels
  • Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.
  • Many web sites fall in the middle of these metrics. For these sites, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception where inlining is preferable is with home pages, such as Yahoo!'s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times. For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser's cache.
  • ...1 more annotation...
  • CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
1 - 20 of 218 Next › Last »
Showing 20▼ items per page