background preloader

CSS Design: Creating Custom Corners &amp

CSS Design: Creating Custom Corners &amp
We’ve all heard the rap: “Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?” Answer: the rounded corners are right here. The markup#section1 In the example markup below, XHTML line breaks have been inserted to pad out dummy paragraphs: <h2>Article header</h2><p> A few paragraphs of article text. If we examine the markup, we’ll see that we have given ourselves at least five hooks, which is all we need to place customized graphics in each of the four corners (and left side) of our article. See Step 1 — primary markup. The design#section2 First let’s decide on some basic layout parameters. “I want the borders and corners to look something like this,” he said. “Could you leave that open, or make it so that it’s easy to change?” The process#section3 We have a div containing the whole article. We’ll use our article-footer div for the bottom left corner — and the contained paragraph for our bottom right corner. Step 1.1 shows how we slice up the sketch.

Web Developer&#039;s Handbook: developing web-sites, exploring o Vitaly Friedman's The Web Developer's Handbook creativity | css galleries & showcases | color tools | color schemes, palettes | color patterns | fashion: colors selection | color theory | royalty free photos | css daily reading | web design daily reading | css layouts | css navigation menus | css techniques | css: software & Firefox Extensions | css-web-tools & services | html-web-tools & services | accessibility checkers | miscellaneous tools | ajax | javascript | DOM | fonts | typography | RSS | CMS | blogging | specifications | usability & accessibility | add a link (free) | seo tools | seo references | howtogetthingsdone | freelancers resources | web2.0 | 2read Advertise here! creativity css: selected showcases css galleries & showcases color tools color schemes, palettes color patterns fashion: colors selection color theory royalty free photos specifications usability & accessibility add a link (free) seo tools seo references howtogetthingsdone freelancers web 2.0 2read: this week

css Zen Garden: The Beauty in CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML. Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. By Dave Shea.

Top 10 CSS Tutorials - Cameron Olthuis stu nicholls | CSS PLaY | CSS demonstrations Below is a list of CSS demonstrations that range from the simplest for beginners, to the most complex for advanced users. If you do not find what you are looking for then please contact me with your requirements and I will let you know if it is possible using just CSS. Avatar ParadeSimple image display using :hover. What's on TVAnother method of displaying images using :hover. A photograph galleryA photo gallery using thumbnail images. A photograph gallery - with links » 20-02-2009A photo gallery using thumbnail images amd linking to large images. A photograph gallery - using <object> » 06-06-2009A photo gallery using the object element. A mixed gallery - using <object> » 22-06-2009A mixed gallery using the object element. Photo Gallery Mk.IIA photo gallery with horizontal scrolling. A gallery using :target » 25-11-2011A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button. Sliding photo-galleriesCompressed images that expand on :hover.

今日无大事: Throwing Tables Out the Window 这是一篇翻译自 blogger.com 的新版网站界面设计者 stop design 网站的文章,如果对原文感兴趣,可以访问 Douglas Bowman 的英文原著。 如果您对本译文有任何疑问或者意见,请直接对本 blog 文章发表评论,或者给我发送电子邮件。 文章摘要 很多网站已经对 CSS 这片海洋进行了深入充分的测试,现在我们从水底开始欢呼的时候到了,让我们奉劝并鼓励那些还没有跳下水来的人,赶紧加入我们的行列。 Throwing Tables Out the Window 妈妈快看,没有表格哟! 那些参加了今年在西雅图的 Digital Design World 的朋友们可能看到我主持了一场题为“No More Tables, CSS Layout Techniques”的讨论。 讨论进行到一半的时候,我改变了节奏,宣布我们将就现实中的实例,实现从表格和占位 GIF 图片的排版方式向纯 CSS 排版的转换。 虚拟的还不够好,我要向真实的案例挑战。 好吧,大概并不只有一部分听众熟悉这个并不那么小的公司。 遗憾的是微软并没有竭尽全力优化她的网站。 为什么是微软? 这是不是仅仅另外一次对微软的挑剔? 直率地,诚恳地说,不是! 我选择微软并不是为了跳上时尚的抨击讲坛,或者向业内人们乐于讨厌的公司多扔些鸡蛋。 我承认我有意地选择并锁定了一个备受瞩目的公司,我天生喜欢追逐领头羊。 以下是原因…… 原因 #1 因为它低效率地使用大量的表格和占位 GIF 来排版。 原因 #2 因为微软网站首页当前设计的基本结构和成千上万的网站的设计有着共同的模式:页眉 + 3 栏 + 页脚。 原因 #3 因为微软的网站对 CSS 的利用,仅限 FAC (字体和颜色)。 原因 #4 因为目前微软根据浏览其网站的浏览器的不同,提供网站的不同版本。 非 IE/Win 的版本和为 IE/Win 提供服务的版本相比,明显简陋得多。 微软还只是为非 IE/Win 的浏览器用户提供了其网站的另一个版本,有些开发者所做的可能远不止这些。 很多开发者相信这些说法,因为他们是从为 IE 开发——并在 IE 中检查——开始的。 IE 和其它在近两年不断升级版本的浏览器(Mozilla、Firefox、Safari、Opera……)相比,对 CSS 的理解更加松散。 从更严格的浏览器开始开发,这些浏览器通常按照它们应该渲染页面的方式去渲染。 请说事实 更多 更多要点和警示

HTML Color Code Combination Chooser siteprocentral.com Buy this domain The domain siteprocentral.com may be for sale by its owner! Related Searches This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. CSS examples CSSTidy 456 Berea Street: Articles and news on web standards, accessibil CSS Optimization: Make Your Sites Load Faster for Free by Bloggi Written by David Peralty in While a lot of people are out to optimize their sites/blogs, most everyone seems to skip over CSS. I have been spending some time looking at CSS Optimization tools today. I wanted something free, online, and easy to use. And of course, something that worked. I tested the CSS Optimizer, Icey’s CSS Compressor, Flumpcakes CSS Optimiser, and CleanCSS to see which one could compress some default CSS files from popular websites the best. I chose six sites: Digg.com – poster boy of web 2.0, and a nice looking design to boot.Slashdot – poster boy of ‘yesterday’. CSS optimizers do a variety of voodoo magic to get the end result. Many broadband users might not think this matters much, as most websites seem to load fast for them, but if each site you went to loaded even 10% faster, think of all the time it could save you over the course of a week, a month or even a year. Digg was our first guinea pig. Filmsy was next. Next up is iBegin Toronto. Last up came ESPN.

能量魔法: Div表格原理與實作  捷足先登学用CSS:HTML结构化 w3cn.org 捷足先登学用CSS:HTML结构化 作者:阿捷 2005-4-15 12:29:43 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对应的什么CSS语句。 结构化HTML 我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。 外观并不是最重要的。 HTML不仅仅只在电脑屏幕上阅读。 开始思考 首先要学习什么是"结构",一些作家也称之为"语义"。 如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块: 标志和站点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明) 我们通常采用DIV元素来将这些结构定义出来,类似这样: 这不是布局,是结构。 根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。 另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。 一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。 良好结构的HTML页面内几乎没有表现属性的标签。 亲自实践一下结构化 上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。 <div id="navcontainer"> <div id="globalnav"> <ul>a list</ul> </div> <div id="subnav"> <ul>another list</ul> </div> </div> 嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。 用CSS替换传统方法 理解浮动行为

表格对决CSS--一场生死之战 w3cn.org 表格对决CSS--一场生死之战 作者:阿捷 2004-7-19 21:00:54 原文作者:Sergio Villarreal作者简介:墨西哥网页设计师,1993年接触网络,个人主页为Overcaffeinated.net原文出处:sitepoint.com原文发表时间:2004年5月27日 前言 我第一次在internet上冲浪用的还是哑终端。 译者注:1.哑终端。 又过了一段时间,奇怪的代码开始充斥我的搜索结果,我虽然还能够阅读需要的内容,但这些代码却令人讨厌。 从那时到现在已经很长时间了,技术上已经发生了难以置信的提高,web界面也被无数次地彻底改革、重新思考和重新改造。 一开始,internet只是按照Geek(技术狂热分子)想法创建出来的,internet上只有纯粹的内容,他们没有考虑到背景颜色和漂亮的 图片。 在我接触CSS和web标准之前,我已经用表格方法设计好多年了。 直到今天。 关于web标准和CSS目前已经有了很多的讨论,就象每一个好的关键词,它将成为web技术发展史上下一个"大人物"。 然而,依然有一部分人们再采用传统的表格设计方法,甚至还在用<font>标签,他们说传统方法更容易,更方便维护和快速 开发。 我决定亲自做一个实验来看看事情是如何变化的,我们到底选择哪种方法更好。 挑战 我用图象软件设计了一个假想的网站。 制作过程分三阶段,并详细记录过程,进行正反两面的比较,看看我们得到了什么? 第一阶段:设计站点 我开始设计虚构的站点。 我希望站点是结构紧凑的、有效的、简明扼要的。 在设计过程中,我坚持一些易用性原则。 文本使用灰色背景,使用Trebuchet MS字体;新闻采用Verdana字体,这种字体缩小时看起来也很好。 对于蝴蝶和那些观察它们的人们我知之甚少,我放了一篇观察稀有蝴蝶的文章在首页重要位置,我想这是用户比较感兴趣的内容。 好了,现在可以开始代码了。 第二阶段:"用以前的做法,使用透明的GIF图片来控制间距." 如果你已经是一位参加过多个项目的网页设计师,下面的结构是你再熟悉不过的: 用表格说话,我们已经习惯于用它了,因为它是我们最基本的"积木块"。 让我们开始一步一步再现整个设计过程。 第1小时 噢。 第2小时 我使用javaScript制作导航菜单的翻转效果: JavaScript这样写: 除了我对老设计方法有点忘记以外,整个进度还是相当快的。 第3小时 第4小时 可恶! 第5小时 第6小时 结论

Related: