CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output
CSS Generator - Generate your own CSS Style Sheet code How to Make a CSS Sprite Powered Menu We haven’t gone back to basics in a while. Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. The end goal is to create a navigation menu that loads quickly, and does not require any dated JavaScript for hover effects. The Goal This CSS sprite will keep HTTP requests down and increase load speed. Design the Menu Breaking from the usual flow of tutorials, we’re going to take a look at part of the Photoshop process before hitting the code. Love the Grid Rulers and markers are your best friend when it comes to CSS sprites. In order for the positioning to work in CSS, you’ll need to know the rough coordinates of each menu item inside the sprite. To put it another way, I would much rather remember 100px, 200px, etc than 101px, 342px, etc. Structure with HTML The code below will set up a basic menu structure for us to work with in CSS. A Brief Word on SEO Position Images with CSS
CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility Credits This trick was found on tjkdesign.com.
40 Powerful CSS Tools And Generators To Automate Your Workflow Showcase of 40 useful and powerful CSS tools and generators. These tools can really relieve developers work in many ways – I understand you like always to do everything by yourself but it’s not the best way in the most cases, because it really takes time and such liberty we don’t always have. This is considered to be really complete list about everything CSS related, as CSS lover myself I really evaluate good automated ways so I can focus on things I enjoy the most – creating elegant, usable and optimized website! I just hope you will find some relief in this list as well! Enjoy your time and test these tools for best results! 1. Showcase of 40 useful and powerful CSS tools and generators. 2. Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface. 3. Formats and optimizes CSS. 4. CleanCSS is a powerful CSS optimizer and formatter. 5. 6. 7. 8. CSS Sorter is a free online tool for sorting CSS files.
Drop-Down Menus, Horizontal Style Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.) Article Continues Below Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself. That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Now the fun bit.
Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element. Main Structure CSS Again, I'm not going to get into the details.
Beautiful CSS3 Search Form Lately I've been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I've created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers. View Demo Search Form Round Circle Trick You can create a round circle by specifying a very large value with the border-radius property. Inner Shadow Effect Specifying inset values with the box-shadow property to create a inner shadow effect. Search Form Example The following search form demo is created with CSS gradient, border-radius, and box-shadow with inset values (view the demo with Chrome 4+ or Firefox 3.5+).
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine Advertisement CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Time passed, and at the beginning of the 2000s, when progressive Web designers started to seek alternatives to JavaScript-based rollover menus (with onMouseOver and onMouseOut effects), sprites saw a renaissance in Web development. In 2004, Dave Shea suggested a simple CSS-based approach to CSS sprites based on the practice established by those legendary video games. Where Are CSS Sprites Used?
HTML5 Grayscale Image Hover Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify's partner) for the jQuery and Javascript code. View Demo HTML5 Grayscale The Purpose This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. jQuery Code The jQuery code below will look for the target images and generate a grayscale version. How to use it To apply this to your site: include a copy of jquery.js paste the code as shown above set the target image (eg: .post-img, img, .gallery img, etc.) you may change the animation speed (ie. 1000 = 1 second) Compatibility It works with any browser that support HTML5 and Javascript such as Chrome, Safari, and Firefox. Credits
Tabs See the demo page for the finished version of the code. In this example, we'll look at using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space. It will require a few lines of JavaScript to dynamically update the individual tabs but we'll cover that code later. Constructing the Display The Tabs The tabs consist of simple A tags using style classes designed to make them look like the little tabs found on file folders. The CSS and HTML code is shown below. The outer DIV element provides a container for the tabs, its "tabArea" class setting a base font for them. The Active Tab To make one tab stand out, we define a new style class named "activeTab" which can then be combined with the "tab" class on any link. Then the HTML code is updated to make one tab appear active by adding this class name to the link tag. You can assign multiple style classes to an element by separating the names with spaces in its CLASS attribute.
CSS Absolute Positioning: Create A Fancy Link Block Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive. The final result of our work will be as same as the demo below. Write your link block elements in HTML code We will create the HTML code first. Our HTML will be: Before applying CSS code, let’s see how our link block would be Applying CSS code And this is our CSS code For the List of links: For the Title of the links: We need to set margin left 45px for the title to display image in this space. CSS for the description: The same as the title, you should remember to set clear is none. Add CSS code for image: Now, we will review our HTML code. Remember to set z-index for the link to make sure it is always on top. Absolute CSS Trick CSS tutorial Position Related Articles
A Colorful Clock With CSS & jQuery Martin Angelov The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months. And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own). Go ahead, download the demo files and continue with step one. Step 1 – XHTML As usual, we start with the XHTML markup. This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds). Lets take a look at the XHTML that is inserted by jQuery: jquery.tzineClock.js This code is contained in jquery.tzineClock/jquery.tzineClock.js. Lets continue with the next step. A Colorful jQuery & CSS Clock Step 2 – CSS
Accordion using only CSS An accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated. Result CSS3 Accordion Works in browsers that support the :target pseudo-class, see the Quirks Mode compatibility tables. Experiment updated. How To Each part of the accordion has an ID, heading and content region. <div class="accordion"> <h2>Accordion Demo</h2> <div id="one" class="section"> <h3> <a href="#one">Heading 1</a> </h3> <div> <p>Content</p> </div> </div> <div id="two" class="section"> <h3> <a href="#two">Heading 2</a> </h3> <div> <p>Content</p> </div> </div></div> The CSS then relies on the :target pseudo-class to apply different styles to the chosen section — increasing the height and, in large content cases, altering the overflow behaviour to allow scrolling. Stripping out the styling, the CSS boils down to: Critique Obviously this approach has its limitations.