CSS3 tucked corners effect I had one of those moments this week when I remembered I saw a while ago a tucked corners effect made by Joshua Hibbert. That was cool. While thinking about it, one of my first thoughts was to try finding an alternative solution which can allow you use a pattern as a background for the containing block. For this alternative CSS3 tucked corners effect, I used the beveled corners technique by Lea Verou, a technique you’ve seen implemented before for my CSS3 tabs with beveled corners. View demo The HTML The following markup is pretty similar with Joshua Hibbert’s solution. The CSS The [class*='tucked-corners-'] advanced selector will select only the elements that have the string tucked-corners- anywhere within the class attribute value. IE9 case As you already know, IE9 doesn’t support CSS3 gradients but it does supports the box-shadow property. My “workaround” was to use the following IE9 CSS hack to hide the pseudos shadows. That’s it More on this topic: Update
Raphaël—JavaScript Library 8 jQuery Plugins for Enhancing Typography Being able to improve and manipulate web typography has always been one of the biggest changes for web designers. But thanks to the ease of use and popularity of jQuery, developers are coming up with some clever ways to do just that. For this post we’ve gathered 8 useful jQuery plugins that allow you to do things to type that couldn’t be done before. Arctext.js Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. Textualizer Textualizer allow you to transition through blurbs of text. jqIsoText Some content on our pages are more important than other and we want to made him eye catching. BigText BigText makes text big. jQuery Text Resizer The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. slabText A jQuery plugin for producing big, bold & responsive headlines. FitText Lettering.js Related Posts
Pure CSS Timeline – Notebook | MattBango.com I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline. Introduction First and foremost, is the solution I’m about to share with you the best solution? What are we building? Let’s take a look at a screenshot of the timeline that we’re building in this tutorial. We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn’t have CSS enabled? What would make this better is if the labels for the x-axis of the timeline would work better with the timeline block labels. The Markup I chose to use a unordered list implementation. The CSS
13 Amazing Examples of HTML5 and CSS3 Startup Framework Close 2010, Jul 14 // Kevin Liew // 34 comments // Inspirations 13 Amazing Examples of HTML5 and CSS3 Advertisement Introduction Another post that demonstrate the power of HTML5 and CSS3. In case you missed my previous post regarding CSS and HTML5, you can read it afterward. Author: Kevin Liew Kevin Liew is a web designer and developer and keen on contributing to the web development industry. Share the love 3,701inShare Related Posts 10 Incredible CSS3 Drawing You Must See 11 Impressive Google Experiments for Chrome Creative and Funny Illustration of Famous Logos 34 comments Infonomics Wed, 11th April 2012 Thanks for sharing. Luiz Fri, 13th July 2012 thanks..I think I can now develope my own website. deepak Mon, 16th July 2012 it's amazing Reply dan b Wed, 8th August 2012 Flexpaper has some neat html5 examples Reply Jason Reynolds Tue, 25th September 2012 Фън Шуй Tue, 13th November 2012 Nice! Leave a Comment Advertisement
WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font era, WhatFont also detects services used for serving the font. Font name? Want to know more? Want the font? Want to share your discovery? ← Drag this to your bookmark bar to install On any webpage, click your WhatFont bookmark to use the tool. Full support: Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9. Limited support: Internet Explorer 8. ↑Install the extension from Chrome Web Store. On any webpage, click WhatFont button to use the tool. Download Now After downloading, open the extension file to install. The quick brown fox jumps over the lazy dog. Email chengyin.liu@gmail.com Twitter @chengyinliu The tool should auto-update itself. Hosted on Github
Awesome CSS3 generators to simplify front end development CSS3 Generator This generator is definitely one of my favorites, as it allow you to generate more than 10 different CSS3 effects, such as border radius, text shadows, transitions, and more. Visit css3generator.com CSS Gradient generator CSS gradients are cool, but it’s also a bit tricky to remind all the possibilities. CSS button generator In my opinion, this is the most advanced CSS3 button generator available on the internet. CSS3Gen CSS3Gen is a nice generator which allows you to easily create useful snippets of CSS3 and copy them straight into your projects. CSS3 Please CSS3 Please is a very effective tool to test your CSS3 code: Just edit the CSS rules from the editor, and a special container will receive instant changes so you can have a preview of what you’re doing. Layer Styles If you’re familiar with Photoshop, there’s no doubt that you will love Layer Style, a CSS3 generator which replicate the look and feel of the popular software from Adobe. Border image generator CSS3 Pie
HTML5 Website Showcase: 48 Potential Flash-Killing Demos So you’ve heard all rumors about HTML5 would take over Adobe Flash. While most web community argues that it’s possible or not, you must be wandering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash. That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired. Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below. Animation The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. Audioburst Animation A comfortable and fantastic animation created with HTML5’s canvas and audio tag. Ball Pool Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be. Blob Sallad A HTML5-spawned creature that would please you. Bomomo Browser Ball Bubbles
font dragr | Drag and drop font testing Color Animate Any Shape Animation At the time of creation of this demo (May 2011), WebKit and Firefox 5 Beta only. Transition || Dummy Text Generator | Lorem ipsum for webdesigners || Design Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet. Using Design is extremely simple: Drag the Design link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selecting 'Add to bookmarks/favourites'): Load any web-page you want Click Design in your bookmark bar Load the design component you wish to use by clicking on it in the Design control panel. Design features the following components: Grid - overlays a highly configurable layout grid over a web-page. Once Design has loaded, you can load each individual component by simply clicking on the icon representing that component in the Design control panel. Each component can be loaded as a 'standalone bookmarklet' through the instructions of each of their individual pages. The following browsers are supported in Design: No IE6 support?
GridControl: A Grid Overlay System for Design Development. Designing by grid is as old as design itself. Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet through screens that appear right in our vision, grid-based design will be there. When the cavemen of old carved drawings onto cave walls, grids were there. OK, maybe not cave walls. There is a web design showcase I found when doing the Gallery Roundup that specifically showcases sites with great grid designs called Design By Grid. In order for grids to be really effective, you really need to honer them. A Ruler: A Grid Designer's Best Friend Seems pretty obvious. Overlaying a Digital Grid Much of this alignment business is already taken care of for you. So let's get to it. The CSS is pretty straightforward: The other two have identical CSS with the exception of the background image. The Result Share On