CSS components
Components to improve and simplify the design of your Web pages without using a JavaScript framework.
Context menu in JavaScript and CSS
With no framework, create a replacement menu for the right mouse button.
Change the look of the checkboxes in your forms, with no framework.
How to align vertically with minimal code images and labels with a style sheet.
This CSS 3 property, which add a shadow to characters, is implemented in all browsers except IE 6-8 which uses a filter.
How to keep the layout of a multi-rows gallery of image, on all browsers.
Pure CSS tooltip, containing images
We customize information bubbles to choose their appearance and improve their content, with images, titles.
Online tools
Draw a box shadow and get the code to paste.
Free CSS templates
HTML interface: Filling exactly the browser window
Unlike web pages, the interface of an application must not scroll, it must always match the dimensions of the browser and be adjusted when the user resizes the browser window. Here is a style sheet to obtain this result.
External links
- Normalize.js. A style sheet for consistent look across all browsers.
- Columnal. Multi-column design, but it is fluid and become minimal, single-column on small screens of mobile phones.
- Skeleton. Fluid template with one or several columns depending on the size of the screen. Tabs, custom buttons. Uses jQuery. On Github.
- Bootstrap. Created by Twitter, based on jQuery, provides the essential components for the design of a website. It is possible to define a customized version through an online interface with the modules you need and download it.
Resources and applications
- Shapes in CSS. Circle, star, heart, any shape may be drawn by a CSS rule.
- The expressive Web. CSS 3 and HTML 5 demos by Adobe.
- Alice. Demoing CSS abilities.
- Circle navigation. See the demo of this graphical effect.
- CSS Dock. Apple's OS X dock in pure CSS! To be downloaded on GitHub. Another version.
- Flipboard. Flip the page...
Questions?
Tools
- Closure Stylesheet. Java program which extends CSS with variables and functions.
- Web design tools.
Why complicate life?