![]() Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text. Pure CSS Pop-upsĪ pop-up technique that works even in IE 5 Mac. Before your very eyes – a fade-in imageĪ demo using opacity and a single image that gradually fades in to cover the text. Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image. The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s. CSS Bar Graphs: Examplesģ bar graph examples – “Basic CSS Bar Graph”, “Complex CSS Bar Graph”, and “Vertical CSS Bar Graph” using div’s and definition list tags. Creating a graph using percentage background images Curved corners 2įluid width and height divs with rounded corners. Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code). Tree-like navigation using nested lists, great for sitemap pages. Uses only one image and very few lines of code and mark-up. Simple tutorial on adding icons to different types of links. PNG OverlayĪnother way to add flare to images (rounds the corners and adds a border and drop shadow) to make an even more effective image. A CSS styled table version 2Ī beautifully styled, table with semantic mark-up – uses a background image. When you hover over the image, the container div is shown with more text. The table’s captions stay put, which is excellent for long tables. Links that are styled to look like buttons without using images. Scalable CSS Buttons Using PNG and Background ColorsĪ technique that addresses vertical scaling, the use of many images, and lack of a hover effect. CSS-Only Accordion EffectĪn accordion effect using div’s and :hover the accordion effect can be vertical or horizontal. Filter cartridges may be cleaned and reused Available with a wide range of grommet and O-ring materials to optimize fluid and temperature compatibility Variety of seal. whatever: hoverĪ navigation menu that mimics Window’s Start menu. Fulflo Metallic 304 and 316 stainless steel filter cartridges Designed for high temperature and high flow applications CSS370-10SF-DOH. Sticky FooterĪ static footer with very little XHTML required. Uses a single image and adjustment of the background-position attribute. Hovering over the tabs changes the category, while hovering over an image enlarges it. Cross Browser Multi-Page Photograph Gallery ![]() Drop shadow on an imageĪn image effect demo and discussion based on a A List Apart article entitled, “ CSS Drop shadows“. ![]() Part of an article entitled “Supercharge your image borders” showcasing how you can use CSS styles to design images look more interesting. We cant stretch a photo thats 500×250 pixels to anything beyond 500 pixels wide because itll get pixelated. Sliding Photograph GalleriesĪn accordion effect hovering over an image expands it. The problem is, images have inherent dimensions. ![]() Advanced CSS MenuĪ creative and complex navigation scheme. Hoverbox Image GalleryĪ pure css-based gallery hovering over an image enlarges it. Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML. In this article, I’ve pieced together 30 excellent CSS techniques and design examples that showcases the capabilities and robustness of CSS. With that HTML finished, let’s drop in some basic CSS. Me, I like the terseness of shorter tags like b or i for non-semantic markup.) Now, some designers might use a span element instead. (Sharp-eyed readers will note that I’m using a b element for a non-semantic hook. I’m actually appropriating the HTML5 figure/ figcaption tags as class names in this snippet, which makes for a solidly semantic foundation. Nothing fancy: an img element, followed by a brief but descriptive caption wrapped in a b element. Remember our little blockquote, comfortably tucked into our blog article? Well, we’ve got way too much text on this darned page, so let’s replace it with an inset image: The first thing we’ll need to do is to clear some space for it in our markup. To find an answer, let’s do a quick experiment: let’s drop an image directly into our blog module, and see how our layout responds. Going back, back to markup, markup #section2 not a pixel value in sight, and we didn’t have to skimp on the aesthetics. Fig 3.0: Our flexible grid is finally finished.
0 Comments
Leave a Reply. |