资源分享:学习CSS的相关资源网站

css

  • Creating a graph
    Russ Weakley - Creating a graph using percentage background images
  • CSS FOR BAR GRAPHS
    Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph
  • Super simple CSS bars
    Tobias Lütke
  • Dynamic Pie Chart with CSS
    This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
  • CSS Diagrams
    Things to Do With CSS When You’re Bored at Work
  • Star Rater
    Creating a Star Rater using CSS
  • CSS Star Rating
    CSS Star Rating Part Deux
  • Star Rater
    Example 1
  • CSS Ratings Selector
    Using a list item to create a star rater
  • Star Rater
    Example 3

CSS Forms

  • Form layout
    Richard Rutter - clagnut blog
  • Prettier Accessible Forms
    It can be time consuming to make web forms both pretty and accessible….
  • Styling form controls
    Roger Johansson - 456 Berea Street
  • Styling even more form controls
    Roger Johansson - 456 Berea Street
  • Table-less Forms
    Most 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 Garden
    A CSS Stylesheet Collection for Web Forms

CSS Galleries

  • Best Web Gallery
    CSS &Flash Design Inspiration
  • CSS All-Star
    CSS wonders, all over the world
  • CSS Beauty | CSS Design Showcase
    CSS Beauty focuses on providing its audience with a database of well designed CSS based sites, as well as news and happenings on the CSS Design Community. It showcases designers work and serves as inspiration for those looking to build CSS based websites.
  • CSS Bloom
    CSS Gallery, CSS Examples, Website Showcase and Design Inspiration, CSS Design, CSS Designs, Best Looking Blogs, CSS Tricks, Blog’s and Online Portfolio’s Designs, css & xhtml
  • CSS Collection
    web sites without tables
  • cssdesign.se
    Inspiration for Webdesigners
  • CSS Drive- Categorized CSS gallery and examples
    CSS gallery, code samples, tutorials, and more
  • CSSElite CSS Gallery
    CSS Design Gallery and Website Development Resources
  • CSSelite
    We show you the best of the best
  • CSS Empire
    this is a showcase gallery of the finest CSS sites that I can find on the net, They are here in all there glory free to feast your eyes upon.
  • CSS Galleries
    Most sites are CSS-based. Some galleries include Flash sites too!
  • CSS Heaven
    CSS Gallery
  • CSS ImportCSS
    The no-frills CSS Gallery
  • csslove
    CSS Web Design Gallery, featuring the most inspiring and beautiful sites on the web today
  • CSS-Mania
    CSSmania, the most updated css showcase all over the globe
  • CSS Reboot
    CSS Reboot is a community event for web professionals……
  • CSS smooth operator // Tite site collection
    Tite site collection, conforms to Web Standards and designed with CSS
  • CSS Table Gallery
    Data Tables and Cascading Style Sheets Gallery
  • CSS Remix
    CSS-Based Website Gallery
  • css thesis
    CSS Gallery
  • CSS Vault - The Web’s CSS Site
    A repository of sites using cascading style sheets and a list of resources
  • css Zen Garden: The Beauty in CSS Design
    A demonstration of what can be accomplished visually through CSS-based design
  • Data Tables and Cascading Style Sheets Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Design Melt Down
    Design elements, trends, and problems in web design, examples and resources
  • Design Shack - Inspirational CSS and Blog Design
    Design Shack offers regular examples of great CSS, standards based design to help inspire and create. We feature any website which shows off some flair, and doesn’t fit into the standard pattern we come to expect from CSS design.
  • Layout Gala
    a collection of 40 CSS layouts based on the same markup and ready for download!
  • Liquid Designs
    Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS
  • netzfruehling - CSS Showcase Blog
    German Showcase Blog
  • oswd - Open Source Web Design
    Download and upload free web designs
  • Piepmatzel.de
    collecting best practice web standards design examples
  • Pig Pen - Web Standards Compliant Web Design Blog
    CSS Gallery
  • Proestilo - galería de sitios web diseñados bajo estándares
    CSS/XHTML Layout Gallery
  • screenspire.com | full( )screen inspiration
    screenspire.com is a no-embellishment, no-comments, no-technology-favored source for recent website-designs collected from various portals and handcrafted by thomas marban
  • showcase GR
    The best of Greek CSS web design.
  • Stylegala - Web Design Publication
    Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS.
  • tom.ma | screenblog
    A handpicked and growing collection of fine screendesigns.
  • The Weekly Standards - CSS Web Design Showcase
    Standards/CSS-based Web Design in the Corporate World
  • Unmatched Style
    Get inspiration from the CSS Gallery archives
  • W3 Compliant Sites: Sites designed to comply with W3C Web Site Standards
    A collection of web standards compliant web sites and their designers
  • Web Creme
    Web design inspiration
  • Webdesign reference book
    Webdesign reference book - We are releasing a book with about 150 of the greatest webdesigns. Come and submit your own work for the book!
  • Web Standards Awards
    Awarding web sites that successfully combine form and function
  • Well-Designed Weblogs
    Well-Designed Weblogs series is a subjective and non-scientific selection of usable and readable weblogs that are defined as having: An aesthetically pleasing design that has been accomplished through the use of stylesheets rather than layout tables, font tags, and inline images.
  • Well-Designed Weblogs Volume 2

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

  • CSS Image Maps
    Below is a sample image map that’s built entirely using CSS and XHTML…
  • Map Pop
    This experiment uses CSS to create an image map with CSS pop-ups
  • FotoNotes RolloverViewer
    FotoNotes RolloverViewer is an open-source PHP script which will read a FotoNote-annotated image and create an imagemap with Javascript rollovers to display the image’s notes…
  • Simple CSS Image Switcher
    This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function…..
  • Simple(r) CSS Image Switcher
    I didn’t use nested unordered lists. Instead, I used just one unordered list…
  • A Two Step Photograph Gallery
    Stu Nicholls
  • Hoverbox Image Gallery
    …super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
  • Sliding Photograph Galleries
    Stu Nicholls Photo Galleries - vertical slide & horizontal slide

CSS Layouts Templates

  • CSS Layouts
    Stu Nicholls - Three columns, CSS frame, “Fixed”, Cross browser….
  • CSS TEMPLATES
    All templates are XHTML 1.0 and CSS2
  • css Zen Garden
    list of all Zen Garden designs added to date..980+ layouts
  • Flexi-Floats
    3 Column CSS Layout - Fluid, Multi-Column Stretch - Header, Footer, Fluid Center - Fixed or Fluid widths
  • Layout Gala
    by Alessandro Fulciniti - a collection of 40 CSS layouts based on the same markup and ready for download!
  • Look Ma, No Tables.
    CSS Layout Techniques: for Fun and Profit
  • ThreeColumnLayouts
    css-discuss - Bob Easton
  • Open Source Web Design
    Download and upload free web designs
  • Open Web Design
    Download and upload free web designs
  • Sample CSS Page Layouts
    Here are a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed
  • Yet Another Multicolumn Layout
    A multi-column layout

Lightboxes

  • ThickBox 2.0
    Cody Lindley - ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
  • Lightbox Gone Wild!
    Particletree - Chris Campbell
  • Suckerfish HoverLightbox
    Jonathan Christopher
  • Lightbox JS v2.0
    by Lokesh Dhakar
  • Lightbox Plus
    takuya otani - Lightbox JS is very cool and useful script to display an image on the page
  • Leightbox
    Simon de Haan · Eight Media

CSS Lists, Navigation, Menus, Rollovers

  • Turning a list into a navigation bar
    How to use CSS to create a horizontal navigation bar out of a simple ordered list
  • Turning Lists into Trees
    by Michal Wojciechowski
  • CSS Based Navigation
    Didier Hilhorst
  • CSS menus gallery
    Here is a gallery of CSS web menus created with CSS style sheets and without tables
  • Flexible navigation example
    The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.
  • Free CSS Navigation Menu Designs
    Free CSS Navigation Menu Designs at ExplodingBoy - Familiar to dozens
  • Free Menu Designs
    Free Menu Designs - e-lusion.com
  • FreeStyle Menus v1.0 RC9
    This is an XHTML compliant, CSS-formatted menu script, designed to work with the current generation of standards-based websites….
  • More Free CSS Navigation Menu Designs
    More Free CSS Navigation Menu Designs at ExplodingBoy - Familiar to dozens.
  • Navigation Magnification
    The idea behind this experiment is to create an unordered list of links scale according to your hover position, like the icons work in the Mac OS X Dock, using the magnification effect.
  • 14 Free Vertical CSS Menus
    14 Free Vertical CSS Menu at ExplodingBoy - Familiar to dozens
  • CSS Menu Generator
    Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
  • 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!
  • Tabs
    BrainJar - “In this example, we’ll look at using CSS to build a tabbed display…”
  • Mini Slide Navigation
    Sandbox - Stephen Clark
  • Nested lists used to create a simple folder metaphore
    Here’s a rough and ready example showing how to make a folder analalogy using a nested list.
  • Accessible Image-Tab Rollovers
    SimpleBits - Dan Cederholm - Accessible Image-Tab Rollovers
  • Suckerfish Dropdowns
    example page for Suckerfish Dropdowns
  • Fast Rollovers Without Preload
    When using CSS image rollovers, two, three, or more images must be loaded….
  • Variations on a drop-down theme
    Stu Nicholls - CSSplay

Miscellaneous

  • Architecting CSS
    The first step in architecting our CSS is to devise a plan for organizing our files…..
  • CSS Organization
    Tip 1: Flags
  • Beginner’s guide from a seasoned CSS designer
    Cameron Moll - Authentic Boredom
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Panic Guide
    This is not a complete resource, this is a fast resource….
  • CSS & Design Galleries
    List of CSS and Design Showcases
  • CSS Table Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Dynamic Drive CSS Library
    Practical CSS codes and examples
  • CSSplay
    Stu Nicholls - Experiments with Cascading Style Sheets
  • CSS tests and experiments
    Floats, Containers, margins, …Centering, Shrink wrapping, Images, Miscellaneous, hacks, inline-block, Layouts, Tables…
  • Stylish
    Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun
  • Professor X
    The Professor X extension for Firefox let’s you see inside a page’s head without viewing the sourcecode
  • X-Ray
    The X-Ray extension let’s you see the tags on a page without viewing the sourcecode.
  • CSSViewer
    A simple CSS property viewer.

Tips & 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…

Slideshows

  • S5: An Introduction
    Eric A. Meyer - What Is S5? - It’s a Simple Standards-based Slide Show System
  • HTML Slidy
    Dave Raggett - Slide Shows in XHTML
  • S5Easy: Create S5 Slideshows Easy Online
    Create your slideshow in only 3 steps

CSS Tables

  • CSS Table Gallery
    Data Tables and Cascading Style Sheets Gallery
  • Better Zebra Tables
    Zebra Tables is a script that applies different background colors to odd or even table–rows…
  • Pure CSS Scrollable Table with Fixed Header
    Using CSS to allow scrolling within a single HTML table

CSS (and JS)Tooltips

  • Bubble Tooltips
    Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
  • qTip
    qTip will work on all like elements that are on the page. You can specify any HTML tag as your preferred element. Since the title attribute can be applied to any HTML element, this technique is standards compliant!
  • Sweet Titles Finalized
    JavaScript Fading Tooltips
  • Tooltip.js
    …is the NEXT GENERATION in Tooltips; using the Web 2.0 approach of doing a simple thing, and doing it well.

Articles

  • CSS Standards
    Written by Christian Heilmann 01/2004
  • CSS Frames v2, full-height
    Roger Johansson - 456 Berea Street -Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100 % height regardless of the amount of content.”
  • CSS Hacks and IE7
    Position Is Everything - A discussion of the theory of CSS floating
  • Creating Liquid Faux Columns
    By: Zoe Gillenwater
  • Div Mania
    More and more web documents are appearing that consist of nothing more than a collection of div elements. In most cases, better use of CSS selectors could be used to avoid overusing the div element.
  • Effective Style with em
    Jonathan Christopher
  • Exploring Footers
    by Bobby van der Sluis
  • footerStickAlt: A more robust method of positioning a footer
    Cameron Adams - The Man in Blue
  • In search of the One True Layout
    Position Is Everything
  • Is image replacement really worth it?
    Robert Nyman
  • Make better Web pages by understanding the CSS box model
    by Contributor Melonfire
  • Ten more CSS tricks you may not know
    Trenton Moss - Follow up to the popular article, Ten CSS tricks you may not know…..
  • The Most Common CSS Markup Errors
    Sean Fraser - The Elementary Group Standards
  • Vertical Centering in CSS
    Yuhu’s Definitive Solution with Unknown Height

Tutorials

  • Advanced CSS Layouts: Step by Step
    By Rogelio Vizcaino Lizaola and Andy King
  • CSS Basics.com
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide
    CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • CSS Intermediate Guide
    Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Demonstrations and Tutorials
    CSS and HTML examples, demonstrations and tutorials
  • CSS Layout Techniques: for Fun and Profit
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial
    CSS Tutorial von w3schools.com
  • CSS TUTORIAL
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial
    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.
  • Learn CSS Positioning in Ten Steps
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial - CSS selectors
    Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.
    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.
  • Site in an Hour
    by Andrew Krespanis - Making Simple Work of Complex CSS Layouts
  • Style master css tutorial
    hands on css tutorial - This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials
    The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.
  • Stylesheets
    Cascading style sheets tutorials and style guide
时间: 2024-09-12 20:33:12

资源分享:学习CSS的相关资源网站的相关文章

设计资源分享:ued/UI设计/图标资源

文章描述:设计资源分享 用户体验团队网站 1.UCD大社区 http://ucdchina.com/ 2.腾讯WSD http://wsd.tencent.com/ 3.腾讯CDC http://cdc.tencent.com/ 4.腾讯ISD http://isd.tencent.com/ 5.淘宝UED http://ued.taobao.com/ 6.著片会http://www.shupianhui.com/ 7.口啤UED http://ued.koubei.com/ 8.阿里UED h

20个学习CSS的绝佳网站——让你从入门到精通

CSS(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回事儿变的简单化.在HTML和XHTML中设定页面的样式,这是最常用的应用.但也可以应用于 XML类的文档,包括SVG和XUL.他负责管理网页的设计和外观.使用CSS,你可以控制文字的颜色.字体.段落间距.分栏的数目大小布局.背景图片颜色,以及其他很多种的效果.接下来才是要说的是学习并掌握CSS的20个绝佳站点.这里收集到的CSS站点能使你从初学者到高级人员.这些能协助你开发和改进网站.恩,随便看看吧. Csstutorial  这个站

网页设计资源分享:国外CSS和javascript教程

文章简介:最新的Javascript和CSS应用技巧荟萃. 随着前端技术的发展,javascript和css在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,网页教学网将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢! CSS动画和过渡效果 随着CSS3标准的来到,CSS过渡效果和动画效果常常应用到互动的用户体验中,设计师可以通过CSS创建出令

资源分享:HTML+ CSS+Javascript开发的游戏

文章简介:这是一些采用HTML, CSS, 和Javascript开发的游戏.有些甚至只用到了CSS技术. 这是一些采用HTML, CSS, 和Javascript开发的游戏.有些甚至只用到了CSS技术. 1. Whack-a-Rat – CSS only game 2. SURVIVOR (1982 Commodore 64 game remake) 3. Sumon 4. 3D – CSS puzzle 5. Duck Hunt 6. Dino Pairs Game 7. Cops and

传播知识,分享快乐--我的相关资源下载(不定期更新)

Oracle SQL PL/SQL开发及优化 http://pan.baidu.com/s/1kVEFVcr  乐沙弥的世界博客打包下载(更新至2017.04) http://pan.baidu.com/s/1slz0caD MySQL开发与性能优化视频(因时间关系,视频还未/彻底完成) http://pan.baidu.com/s/1pJux9eN 基于MHA的MySQL高可用方案http://pan.baidu.com/s/1i5LaCGP MySQL数据库开发与优化--基础篇http://

网页设计资源分享:优秀的网页设计资源下载

文章描述:优秀设计资源. 字体 Adobe建设的字体站点:用户可以浏览购买字体,筛选字体的交互采用了目前流行的实施自然过渡,是一个非常优秀的模板案例. https://typekit.com/fonts 优秀案例 F-i的设计案例赏析--HTC全球站点解决方案: 网站介绍了HTC全球站点的设计项目,包括概念比稿.用户研究.信息框架.视觉设计等多个设计维度.是不可多得的完整解决方案. http://www.f-i.com/htc/global/ 交互 交互线框模板-iPhone.iPad iPho

(转) 深度强化学习综述:从AlphaGo背后的力量到学习资源分享(附论文)

  本文转自:http://mp.weixin.qq.com/s/aAHbybdbs_GtY8OyU6h5WA   专题 | 深度强化学习综述:从AlphaGo背后的力量到学习资源分享(附论文) 原创 2017-01-28 Yuxi Li 机器之心 选自arXiv 作者:Yuxi Li 编译:Xavier Massa.侯韵楚.吴攀     摘要   本论文将概述最近在深度强化学习(Deep Reinforcement Learning)方面喜人的进展.本文将从深度学习及强化学习的背景知识开始,包

XML轻松学习手册(6)XML相关资源

xml 第六章:XML相关资源 一. XML的大本营 XML是由W3C(World Wide Web Consortium)国际组织负责开发和制定标准的.关于XML最权威,最新的消息都来自W3C.网址是:http://w3c.org/XML/ 另外一个名为OASIS的前著名的SGML研究组织也在一起推动XML的发展,网址是:http://www.oasis-open.org/ 二. XML指南 http://www.w3.org/TR/REC-xml W3C关于XML规范的详细,完整的说明.不用

真正资源分享的网站 淘园

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网络上从来就不缺问题的答案,但是太多的选择往往就意味着无从选择.任何一个搜索者通过搜索引擎搜索到的任何一个问题,答案可能是千变万化甚至是截然相反的.这样的答案悖论往往让我们无从选择,饭前吃苹果好还是饭后吃苹果好,这样如经典的女士减肥选择题,搜索引擎告诉你的答案是都好,这样模棱两可的搜索答案,结果是让女士学会了吃一口饭咬一口苹果. 种种网络搜索