BlogPhoto » CSS http://nycgraphix.com/blogphoto Everything you have been looking for and more!! Mon, 22 Aug 2011 00:43:02 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS Forms Tutorials http://nycgraphix.com/blogphoto/2007/06/css-forms-tutorials/ http://nycgraphix.com/blogphoto/2007/06/css-forms-tutorials/#comments Wed, 27 Jun 2007 22:13:36 +0000 nycgraphix http://designcreatology.com/b/web-development/css/css-forms-tutorials/
  • Accessible CSS Forms
    Using CSS to Create a Two-Column Layout
  • Basic Formsbasic inputs, text-input boxes, radio buttons and check boxes
  • Form Help without PopupsThis article illustrates a scripting technique to get around the problem without having to open a new window.
  • Form layoutRichard Rutter – clagnut blog
  • Forms TutorialForms allow your viewers to input text right to their screen! 17 Form Tutorials
  • Fun with formscustomized input elements – By Sшren Madsen
  • Prettier Accessible FormsIt can be time consuming to make web forms both pretty and accessible….
  • Styling form controlsRoger Johansson – 456 Berea Street
  • Styling even more form controlsRoger Johansson – 456 Berea Street
  • Styling of forms – Stu Nicholls
    A form with style
  • Table-less FormsMost of the CSS-only, table-less forms available suck. So, not wanting to stoop to mediocrity, I decided to take on the task of coming up with something better. This is the result of my efforts….
  • The Form GardenA CSS Stylesheet Collection for Web Forms
  • Trimming form fieldsWe’ll make a semantic and accessible form with only a sprinkling of additional mark-up. We’ll add minimal CSS to maximum effect and provide users with a method for removing optional fields….

    • Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/06/css-forms-tutorials/feed/ 3     Need Inspiration? http://nycgraphix.com/blogphoto/2007/05/need-inspiration/ http://nycgraphix.com/blogphoto/2007/05/need-inspiration/#comments Wed, 16 May 2007 22:38:46 +0000 nycgraphix http://designcreatology.com/b/index.php/web-development/css/eye-candy/need-inspiration/ From time to time everyone experiences a creativity block. Especially when it comes to designing a website. Here a a few sites that showcase nothing but beautiful websites from around the world. Your bound to get inspired after gazing through the sites listed below.

    CSS Import

    CSS Import

    CSS Princess

    CSS Princess

    CSS Drive

    CSS Drive

    Design Snack

    Design Snack

    CSS Vault

    CSS Vault

    Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/05/need-inspiration/feed/ 3     Scrollbar Color http://nycgraphix.com/blogphoto/2007/04/scrollbar-color/ http://nycgraphix.com/blogphoto/2007/04/scrollbar-color/#comments Sun, 22 Apr 2007 18:22:20 +0000 nycgraphix http://designcreatology.com/b/index.php/web-development/css/scrollbar-color/

    Adding color to your webpage scrollbar adds a little flavor to your page. It also gives you the power to match the scrollbar with your website’s design colors! Now there are different parts to the scrollbar so please take a look at the diagram below:

    scrollbar_step1.gif

    Now that you have an understanding of the different parts of a scrollbar it’s time to add the necessary code to colorize them! Place the following code between the <head> </head> tags on your page:

    <style type=”text/css”>
    body {
    scrollbar-3dlight-color: ;
    scrollbar-arrow-color: ;
    scrollbar-DarkShadow-Color: ;
    scrollbar-Face-Color: ;
    scrollbar-Highlight-Color: ;
    scrollbar-Shadow-Color: ;
    scrollbar-Track-Color: ;
    }
    </style>

    You can use either a hex value or the name for the color of your choice. Just type either the hex value or name next to each part of the scrollbar. For example, if you want the arrow color to be white it would be:

    scrollbar-arrow-color: white; (name)
    scrollbar-arrow-color: #FFFFFF; (hex value)

    NOTE: Scrollbar colors do not work on all browsers.

    Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/04/scrollbar-color/feed/ 0     CSS Inspirational Galleries http://nycgraphix.com/blogphoto/2007/03/css-inspirational-galleries/ http://nycgraphix.com/blogphoto/2007/03/css-inspirational-galleries/#comments Tue, 27 Mar 2007 16:09:17 +0000 nycgraphix http://designcreatology.com/b/graphic-design/css-inspirational-galleries/
  • CSS Zen Garden -
  • CSS Vault -
  • CSS Beauty -
  • Stylegala -
  • Webcreme – A design gallery updated daily with fresh and innovative sites
  • CSS Mania -
  • CSS Reboot -
  • CSS Thesis -
  • CSS Import -
  • Unmatched Style -
  • CSS Drive -
  • CSS Galleries – Aggregating CSS & Web design inspiration
  • CSS Play – Fantastic CSS resource site with loads of demos and tutorials. Some particularly impressive CSS photo galleries
  • Daily Slurp – Daily link dump of well designed sites.
  • Light on Dark -
  • Liquid Designs -
  • Dark Eye -
  • W3 Compliant Sites -
  • Most Inspired – Aggregates web-design galleries into one easy to access page.
  • kovver css gallery – css gallery with very high selection standards. only for the top designs!
  • CSS Flavor – Collectoion of Best CSS Design Websites
  • CSSElite css gallery – CSS Design Gallery and Website Development Resources
  • Style Crunch – StyleCrunch is a css and standards websites gallery.
  • CSS Bloom – CSS Bloom is a website showcasing the best CSS based designs used by Blog’s and Online Portfolio’s.
  • CSS Remix – CSS Remix celebrates the dynamic innovation and creativity of designers who are on the forefront of CSS-based design.
  • The Horizontal Way – An horizontal showcase for horizontal scrolling websites.
  • CSS Websites – CSS Gallery by Design CSS
  • Submit CSS – a brand new website gallery full of css designs
  • Best Web Gallery – Best Web Gallery is an inspirational gallery site where we collect a wide range of quality design websites
  • Cssimpress – CSS Impress – Gallery of CSS Websites
  • CSSelite – Only the best of the best in CSS. Great gallery.
  • CSS Spain – Here you will find sites developed in Spain with the web Standards and Guidelines of the W3C
  • Alternative CSS – Gallery focusing on new and creative design ideas, elements, layout methods, and styles.
  • Camaleon – Hispanic CSS Zen Garden
  • CSS Blast – russian css showcase
  • Doblepixel -
  • CSS Collection – Naked Sites: Shedding tables and running free
  • showcase GR – showcasing the best of Greek CSS web design
  • Design Snack -
  • Web Standards Awards -
  • Design Melt Down – Articles on web design trends, each with a slew of samples.
  • Open Web Design -
  • A List Apart – Great web design resource

    • Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/03/css-inspirational-galleries/feed/ 4     CSS Eye Candy http://nycgraphix.com/blogphoto/2007/03/css-eye-candy/ http://nycgraphix.com/blogphoto/2007/03/css-eye-candy/#comments Tue, 13 Mar 2007 00:56:52 +0000 nycgraphix http://designcreatology.com/b/graphic-design/css-eye-candy/ Get design inspirations from these showcases. Please list all of the existing galleries on the Net.

    • CSS Zen Garden -
    • CSS Vault -
    • CSS Beauty -
    • Stylegala -
    • Webcreme – A design gallery updated daily with fresh and innovative sites
    • CSS Mania -
    • CSS Reboot -
    • CSS Thesis -
    • CSS Import -
    • Unmatched Style -
    • CSS Drive -
    • CSS Galleries – Aggregating CSS & Web design inspiration
    • CSS Play – Fantastic CSS resource site with loads of demos and tutorials. Some particularly impressive CSS photo galleries
    • Daily Slurp – Daily link dump of well designed sites.
    • Light on Dark – the majority of web sites you visit on the internet have a white background, with black text. rarely do you find web sites that use a dark background with light text.
    • Liquid Designs -
    • Dark Eye -
    • W3 Compliant Sites -
    • Most Inspired – Aggregates web-design galleries into one easy to access page.
    • Best Web Site Design – Our web site design services has a competitive team of skilled professionals and have best exposure in the industry. They are equipped to provide you with complete services in website design and development as well as enhance
    • CSS Flavor – Collectoion of Best CSS Design Websites
    • CSSElite css gallery – CSS Design Gallery and Website Development Resources
    • Style Crunch – StyleCrunch is a css and standards websites gallery, you can find the best sites in the www, best design, best coded and what engine used.
    • CSS Bloom – CSS Bloom is a website showcasing the best CSS based designs used by Blog’s and Online Portfolio’s. By providing links, and previews of the best designs, we aim to provide our viewers with inspiration for their websites. If you have come across a design which is missing from CSS Bloom, but you feel should be added, or if you would like to submit your own design, then please use the Submit link at the top of the page.
    • CSS Remix – CSS Remix celebrates the dynamic innovation and creativity of designers who are on the forefront of CSS-based design. We honor those designers who aren’t afraid to think outside the box and who are reinventing our ideas of what great web design can be.
    • The Horizontal Way – An horizontal showcase for horizontal scrolling websites.
    • CSS Websites – CSS Gallery by Design CSS
    • Submit CSS – a brand new website gallery full of css designs
    • Best Web Gallery – Best Web Gallery is an inspirational gallery site where we collect a wide range of quality design websites
    • Cssimpress – CSS Impress – Gallery of CSS Websites
    • Got_Computer_Problems?_Free_Diagnostic_Tools_Repair_Your_PC_Instantly -
    • CSSelite – Only the best of the best in CSS. Great gallery.
    • CSS Spain – Here you will find sites developed in Spain with the web Standards and Guidelines of the W3C
    • Alternative CSS – Gallery focusing on new and creative design ideas, elements, layout methods, and styles.
    • Camaleon – Hispanic CSS Zen Garden
    • CSS Blast – russian css showcase
    • A_MUST_See_for_anyone_with_an_IPOD -
    • Doblepixel -
    • CSS Collection – Naked Sites: Shedding tables and running free
    • Word Studio -
    • showcase GR – showcasing the best of Greek CSS web design
    • Design Snack -
    • Web Standards Awards -
    • Design Melt Down – Articles on web design trends, each with a slew of samples.
    • Open Web Design -
    • A List Apart – Great web design resource
    • Webdesign reference book – They are publishing a book! Fall 2006 150 of the best web designs are picked out, and will be included in a book, together with articles and interviews, with and about some of the designers!
    • netdiver -
    • Undersigned – Webdesign reference book – We are releasing a book with about 150 of the greatest webdesigns.
    ]]>     http://nycgraphix.com/blogphoto/2007/03/css-eye-candy/feed/ 0     CSS Mega Info List http://nycgraphix.com/blogphoto/2007/03/css-mega-info-list/ http://nycgraphix.com/blogphoto/2007/03/css-mega-info-list/#comments Mon, 05 Mar 2007 17:00:52 +0000 nycgraphix http://thoughtofmine.wordpress.com/2007/03/05/css-mega-info-list/
  • CSS Optimization: Make Your Sites Load Faster for Free – CSS optimizers do a variety of voodoo magic to get the end result. This includes merging similar classes, removing useless properties, removing whitespace, and so forth.
  • Alternative Style: Working With Alternate Style Sheets – So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are. Great. But now you need a cross-browser way to dynamically switch between the style sheets.
  • Various CSS Tutorials – Many different FREE CSS tutorials from forms to layouts it’s quite an extensive resource.
  • Benefits of CSS – Cascading Style Sheets is a technology that has been around for several years. It’s a great way to assign style properties to HTML elements in your web pages, and offers several significant benefits over the old way of putting style information directly into HTML tags.
  • Creating a centered page layout with CSS – A reader recently asked how to create a centered page layout using CSS. The effect the reader is looking for is similar to the layout achieved by centering an 800-pixel-wide table on a 1024-pixel-wide page. It’s a widely used page layout that traditionally relies on nested tables to achieve the effect, so it’s not surprising that the reader is looking for a way to replicate the effect with CSS.
  • Build a better Web site by understanding floated elements in CSS – Cascading Style Sheets (CSS) are rapidly becoming the de facto standard for Web page layout and positioning. They’re easy to use, don’t require any special software, and work uniformly on most major browsers. Using them correctly, however, requires a sound analysis of the functional purpose of a particular layout, both to ensure that the resulting style sheets are logically and functionally correct and that they are portable across different browsers or viewing devices.
  • Styling form controls with CSS, revisited – Roger Johansson writes about web standards, accessibility, usability and other topics related to web design and development:
  • The W3C CSS Validator Fuji release – A new version of the W3C CSS Validator (The Fuji CSS Validator release) was released in mid-December. It now defaults to validating against CSS 2.1, which is good, and the layout has been improved, which is also good.
  • CSS and Web development search engines – While custom search engines are an interesting concept I find myself somewhat wary of using them. Not because there’s anything wrong with them, but because I can’t help wondering if what I’m looking for is on a site that the custom search engine has not added to its index.
  • STUDIO7DESIGNS Custom Graphic and Web Designs, Photography and more! – STUDIO7DESIGNS is dedicated to creating the best graphic and web designs in the web 2.0 style. Currently we have over 200,000 people using our open source designs! Our goal is to take your dream and turn it into reality. From logo design, to fully valid css and xhtml web sites, we strive for perfection. Contact us today with your ideas and we will give you a free design quote!
  • Open Source Templates – These are Open Source Templates. Use them anyway you like. This is a great way to learn how to code!
  • The Open Design Community – The Open Design Community (TODC) is a group of Open Source Website Designers providing free web design templates helping to make the global internet a prettier place.
  • CSS Link Styles – Want to know how to create CSS link styles (pseudoclasses)? It’s easy! Just follow along and you’ll be a master in no time.
  • CSS Styling for Print and Other Media – There are many different media types that you can apply to CSS, some of which are more useful than others, and they let you specify the look, feel, or sound of the web page that is linked to the CSS files.
  • CSS Layout Generator – The layout generated has changed significantly from previous versions. The main reason for change was to simplify the layout and in doing so make it easier to use. It no longer provides fixed width columns with fluid center or full length columns by default. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
  • Professional CSS – My favorite part of Web design is learning new things, so I’m always looking for new books on the subject. We’re still trying new things, but we’re out of the browsers-changing-daily era of Web design. There’s not a whole lot more anyone can say about HTML or XHTML, which leaves CSS as the next big topic.
  • CSS Reference (based on MSDN and WC3 CSS reference) – CSS styles defined
  • RichInStyle.com also provides help on key areas of web style – Now for the first time with RichInStyle.com you can use the latest technologies with confidence – whereas before you would have been ill-advised to rely on style sheets for styling your pages, you can now afford to use them on all your pages and reap all the many benefits that they bring. This is thanks to RichInStyle.com’s exhaustive bug pages, which detail nearly 1000 bugs, all organized into easy-to-read sections, as well as to its bug table, which provides at-a-glance access to information.
  • A demonstration of what can be accomplished visually through CSS-based design. – There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation.
  • Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets – The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server. Do you need it? If you are a Web developer or a Web designer, this tool will be an invaluable ally. Not only will it compare your style sheets to the CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will also tell you when your CSS poses some risks in terms of usability.
  • Sliding Doors of CSS, Part II – Sliding Doors of CSS (Part I) introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, we’ll push the technique even further. If you haven’t read Part I yet, you should read it now.
  • Super-Easy Blendy Backgrounds – Recently, while trying to implement a few different navigation ideas that a designer had thrown my way, I became frustrated with my weak image editing skills. The design was gradient-heavy, so a traditional approach to navigation markup and styling would require a dozen or so background-image slices to meet the varying colors and height requirements.
  • Do You Want To Do That With CSS? – Multiple Column Lists – In this tutorial we will learn methods to make a list display as multiple columns of list items, rather than as a single column or horizontal row.
  • CSS Beginner Tutorial – CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document. Styles don’t smell or taste anything like HTML, they have a format of ‘property: value’ and most properties can be applied to most HTML tags.
  • CSS Intermediate Tutorial – Like the HTML Intermediate Tutorial, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner Tutorial.
  • CSS Advanced Tutorial – The CSS Advanced Tutorial is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • How to size text using ems – Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems.
  • Beautiful CSS Templates – All templates are valid XHTML (strict) and CSS. They use less than 25 kilobytes of images and all of them should (hopefully) comply with Section 508 and atleast a WCAG Double-A rating.
  • Centering text on the longest line – The Web Typography project continues to proceed, albeit at a glacial pace. One of the reasons for the slow progress is guidelines such as this: to distinguish verse quotations from surrounding prose, they should be [...] centered on the longest line. An uncommon request, but it sounds straightforward enough. Don’t let that fool you. Centering a block is reasonably simple if you know how wide it is.
  • Complete CSS Web Templates – All templates are free to use. All we ask is that you please keep the link in the footer of the templates that links back to the designer to help them make a living and to help them be able to provide free website templates.
  • Variable fixed width layout – There’s an different approach to web page layout which is gradually getting some traction. The idea is that the layout is changed to best accommodate the window size. As you might expect, it is accomplished by using JavaScript to change the CSS of the webpage.
  • Not the best but good for beginners – Sort of cheesy web templates but they are great to learn on.
  • More on multi-column layouts – Since Firefox 1.5 Beta 1 shipped with a partial implementation of the proposed CSS 3 Multi-column layout module, it’s received a fair bit of attention. A List Apart recently covered the implementation along with some scripted alternatives, and Quirksmode provides really detailed coverage of what is and isn’t supported (right now that’s the best place to go to learn the syntax).
  • Free Web Templates – Use these free Web templates to create valid XHTML documents using CSS instead of tables. If you don’t want to learn to write CSS layouts, you can still create valid XHTML using free Web templates. The newest are listed first.
  • Fun with Drop Shadows – Drop Shadows are a nice way to beautify images. There are many articles on them: * CSS Drop Shadows * CSS Drop Shadows II * Easy CSS Drop Shadows * CSS Drop Shadows Test
  • More templates to screw up – Basically the worst kinds of all but the good part is that they are not your real site so have fun.
  • Tables to Valid XHTML/CSS – In this one I will be teaching you how to take your current website/layout created with tables, tear it apart, and put it back together using valid XHTML and CSS. In this tutorial I will be using an example template to teach you, however you can take the principles I teach here and apply them to your own creations.
  • One step above cheesy – and almost functional..
  • Templates, Templates,Templates – Unique to say the least
  • Templates and CSS Tools – All free and very useful
  • Beautiful CSS Layouts – Wonderful layouts completely free.
  • Great site that offers new templates – This site offers free CSS website templates, a free web tools list and resources like articles, tutorials, and links that will help you learn the power of CSS, web-standards and tips on how to make a fast, easy to maintain, user-friendly websites.
  • A newbie? – 16 years old self taught web designer / developer from Nis, Serbia. I making only static web sites [XHTML & CSS]. Ok if he can do it we all can too.
  • Float just about anything you want – Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  • CSS Tutorials: An Enormous List – anything and everything that you want to know about css
  • The Pinball Effect – Yadda × 3: Preamble It’s quicker and easier to use a bigger link than a smaller one—this is obvious. There’s even a mathematical formula, Fitts’ Law, to calculate just how much quicker. Presented below is a simple way to transform an entire area of a Web page into a link from within it, effectively expanding the link’s size, using Cascading Style Sheets, JavaScript and the Document Object Model. I call this the Pinball Effect because the cursor lights up various areas of the screen sort of like a pinball does zipping around the playfield.

    • Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/03/css-mega-info-list/feed/ 1     CSS Tips and Tricks http://nycgraphix.com/blogphoto/2007/03/css-tips-and-tricks/ http://nycgraphix.com/blogphoto/2007/03/css-tips-and-tricks/#comments Mon, 05 Mar 2007 16:56:22 +0000 nycgraphix http://thoughtofmine.wordpress.com/2007/03/05/css-tips-and-tricks/
  • All About CSS Drop Shadows
    By: John Gallant , Holly Bergevin
  • :BefTer Drop Shadows
    Using :before and :after pseudo elements to create beautiful drop shadow on standard browsers. Use built-in drop-shadow filter for Ie.
  • Fun with Drop Shadows
    Drop Shadows are a nice way to beautify images….
  • CSS Browser Selector
    Simple trick to help you on CSS hacks!
  • CSS filters (css hacks)
    Will the browser apply the rule(s)?
  • Image Preloader
    maratz.com – Marko Dugonji
  • Link Thumbnail
    Link Thumbnail shows users that are about to leave your site exactly where they’re going
  • Pure CSS Popups
    Eric A. Meyer
  • Smart Corners
    Using lightweight images, simple markup, and a small amount of CSS, I will demonstrate a method of creating round corners on elastic or liquid boxes
  • Spanky Corners 1.1 beta
    Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work
  • “Sliding Doors” Box– Rounded Corners for All
    A Simple, Semantically Correct CSS Box with Clean Code
  • Liquid round corners
    Adaptable rounded edges – a multifunctional flexible css-concept with transparency for creating dynamically changing not rectangular borders
  • A More Accessible Map
    Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive?
  • CSS-Schieberegler
    A Slider with CSS. Without Java, Javascript, Flash oder animated gifs
  • Playing Cards with CSS
    This example demonstrates using CSS to graphically display standard playing cards on a web page…

    • Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/03/css-tips-and-tricks/feed/ 1     A list of resources for CSS http://nycgraphix.com/blogphoto/2007/03/a-list-of-resources-for-css/ http://nycgraphix.com/blogphoto/2007/03/a-list-of-resources-for-css/#comments Mon, 05 Mar 2007 16:43:08 +0000 nycgraphix http://thoughtofmine.wordpress.com/2007/03/05/a-list-of-resources-for-css/ Navigation

    • Colly’s CSS rollover generator
      CollyLogic CSS Multi-element Rollover Generator
    • CSS Tab Designer
      CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
    • Listamatic
      not a tool but very useful! – one list, many options – Using CSS and a simple list to create radically different list
    • Listamatic2
      nested list options
    • List-O-Matic
      Generate CSS-styled navigation menus based on list items
    • List-O-Rama!
      Dreamweaver MX and UltraDev Zone – List-O-Rama will allow you to generate nice CSS inline menus in seconds
    • CSS Menu Generator
      CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

    Fonts

    Forms

    Layout

    Misc Tools

    • CSS Love Child
      The Man in Blue Experiment – I want the body of Site […] with the face of site […]
    • CSSVista
      CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously……
    • HTML and CSS Table Border Style Wizard
      Use this wizard to experiment with table border styles and generate style source code.
    • I Like Your Colors!
      Use this tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.
    • Online CSS Scrollbar Color Changer
      Change the scrollbar colors in an HTML page
    • S5Easy: Create S5 Slideshows Easy Online
      Create your slideshow in only 3 steps
    • Selectoracle
      English and Spanish translations of CSS3 selectors
    • Spanky Corners
      ‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

    Formatters and Optimizers

    Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/03/a-list-of-resources-for-css/feed/ 0     The difficulties of learning CSS http://nycgraphix.com/blogphoto/2007/03/the-difficulties-of-learning-css/ http://nycgraphix.com/blogphoto/2007/03/the-difficulties-of-learning-css/#comments Mon, 05 Mar 2007 07:25:54 +0000 nycgraphix http://thoughtofmine.wordpress.com/2007/03/05/the-difficulties-of-learning-css/ Recently I received an email from someone who was having a severe problem learning CSS. I can definitely understand much of the frustration, but I don’t think it really has a lot to do with CSS. Learning anything can be difficult, confusing and frustrating. Whether you’re trying to learn how to ride a bike, swim, drive a car, code HTML or use CSS, most people will get frustrated, feel like giving up, and then give it another try.

    One of the problems I see is that many people who complain about CSS being too difficult haven’t really learned how to code HTML properly. Jumping into CSS-based layouts without a solid understanding of HTML will not be easy. Going from table-based WYSIsortofWYG tag soup to structured, semantic HTML+CSS will take some time and effort. But it’s worth it. I know. Having worked with web design and development since -95 or -96 I’ve had to unlearn the table tag soup ways of coding and really learn HTML.

    Another problem is that there are CSS evangelists who swear up and down that not only can CSS do everything that tables can, it does it cleaner, easier and better (quote from the post to css-discuss). Yes, there are. And no, as long as browsers like Internet Explorer don’t improve their CSS support there are a few layout tricks that are very hard to achieve with a pure CSS layout but are easy to do with tables. Don’t blame that on CSS though. Blame it on lazy browser vendors.

    So, what is it that you can’t easily do with CSS that is easy with tables? Some things I can think of:

    • footer that sits at the bottom of the browser window only when there’s not enough content
    • side-by-side boxes that expand to the same height even when they contain different amounts of content
    • vertically centered content of unknown height inside a box

    Anything else? I can’t think of anything else, but there’s probably one or two other cases where pure CSS layout won’t work well, especially in Internet Explorer.

    Note that there are cases where tables should be used. A common misunderstanding is that tables can’t be used for anything, but if you’re marking up a table of data, a table is what you should use.

    If you feel that you absolutely must have something in your design that calls for a table, then go ahead and use a table for that specific effect! Just avoid nesting tables, make sure your markup is semantic and valid, and then style the page with CSS. You’ll still be way better off than if you do the old-school thing with five levels of nested tables, font tags, presentational, invalid HTML and no semantic markup whatsoever.

    Any suggestions, ideas? Feel free to comment on this article!

    Back to Top

    ]]>     http://nycgraphix.com/blogphoto/2007/03/the-difficulties-of-learning-css/feed/ 0