background preloader

CSS3 Image Styles

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: 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

20 Things I Learned About Browsers and the Web IllustrationChristoph Niemann Writers/EditorsMin Li Chan, Fritz Holznagel, Michael Krantz Project CuratorMin Li Chan & The Google Chrome Team DesignFiPaul Truong DevelopmentFi Very Special Thanks To Brian Rakowski, Ian Fette, Chris DiBona, Alex Russell, Erik Kay, Jim Roskind, Mike Belshe, Dimitri Glazkov, Henry Bridge, Gregor Hochmuth, Jeffrey Chang, Mark Larson, Aaron Boodman, Wieland Holfelder, Jochen Eisinger, Bernhard Bauer, Adam Barth, Cory Ferreria, Erik Arvidsson, John Abd-Malek, Carlos Pizano, Justin Schuh, Wan-Teh Chang, Vangelis Kokkevis, Mike Jazayeri, Brad Chen, Darin Fisher, Johanna Wittig, Maxim Lobanov, Marion Fabing Nicolas, Jana Vorechovska, Daniele De Santis, Laura van Nigtevegt, Wojtek Cyprys, Dudley Carr, Richard Rabbat, Ji Lee, Glen Murphy, Valdean Klump, Aaron Koblin, Paul Irish, John Fu, Chris Wright, Sarah Nahm, Christos Apartoglou, Meredith Papp, Eric Antonow, Eitan Bencuya, Jay Nancarrow, Ben Lee, Gina Weakley, Linus Upson, Sundar Pichai & The Google Chrome Team

15 Places To Download Free High Quality Stock Photos There are many free stock photography sites. I set out to find as many good ones as I could. I found 15 good, solid resources out there. Royalty Free does not mean the images are free; it means that you don’t need to pay the photographer a royalty each time you use the image. Today I am going to share 15 websites where you can download free stock photos. You can easily get a quality and beautiful wallpaper for your desktop or simply an illustration for your blog. Free stock nature photography. This site is a community for travel photographers. This is a huge resource of over3 million photos! This site provides tons of high quality and high resolution free stock photos. The photos on Imagebase are free to use, and are licensed under a Creative Commons license. Stockvault is a very classy, modern site with thousands of images and some Photoshop tutorials. Morguefile is a completely free source for stock photos. All the photos are free to use. Related Posts:

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. So the traditional fixed width design doesn't work any more. 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.

HTML5, browsers, and books, twenty years later Update: Thanks for all the interest and feedback on 20 Things I Learned about Browsers and the Web! We hope to open-source the code in the coming months and will post an update when we do. Stay tuned. Twenty years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. In building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life features that hearken back to what we love about books with the best aspects of the open web: the app works everywhere, and on any device with a modern browser. After the app has been visited once, you can also take the experience with you offline, thanks to the Application Cache API.You can resume reading where you had left off as the book remembers your progress using the Local Storage API. This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. By Min Li Chan, Google Chrome Team

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). 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

CSS3 Transforms & @font-face Experiment | neography Wednesday, March 31st, 2010 This is the first of what I hope are num­ber of exper­i­ments I plan on work­ing on over the next few months, all in an effort to get acquain­ted with some of the new CSS3 fea­tures out in the wild that seem to be gain­ing some traction. The last few months have been pretty excit­ing, with all the talk about new CSS3 fea­tures and how browsers are adding sup­port for them, it’s a great time to be a designer for the web. It’s a lot easier these days to exper­i­ment with dif­fer­ent typefaces, lay­outs and tech­niques pre­vi­ously not available. Take a look at the image below: No, it’s not a poster. How’s it done? Pretty easy actu­ally, I used basic CSS pos­i­tion­ing and some of the newer CSS3 fea­tures to put it together. @font-face Trans­forms -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); Text-Shadows & Box Shadows text-shadow: 2px 8px #b5c1b8, -1px -1px #fff; box-shadow: 4px 6px #b5c1b8; Works in these browsers Indeed.

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

Samples | Stunning CSS3: A Project-based Guide to the Latest in CSS | A book by Zoe Mickley Gillenwater Get a peek into the book's content with these free excerpts. You can also see a brief table of contents, images of some of the book's pages, and links to related resources. Sample of Chapter 1: The CSS3 Lowdown [external article] Read the case study of a real web page that was made more efficient by using CSS3 instead of its existing, older styling methods in this short excerpt from Chapter 1. Sample of Chapter 2: Speech Bubbles [PDF] Learn how to create the appearance of speech bubbles without using any images. Sample of Chapter 6: Different Screen Size, Different Design [PDF] Learn how to restyle an entire page layout to work with different screen sizes using media queries and multi-columns.

New Twitter Design with CSS and JQuery. The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Take a look at this awesome demo. Download Script Live Demo Step 1 First create a DIV element with attribute ID value container. Step 2 Now create a panel-frame DIV element inside the container DIV. Step 3 Here the final HTML code ready. container'> // Right partright'> <div id="panel-frame"> <div class="panel"> <div class="head"><a href="#" class="close">Close</a></div> <div class="data">// jquery id </div> </div> </div> //Left Part <div class="left"> // Message display here <div class="block" id="1">1</div> <div class="block" id="2">2</div>.............................................................. Javascript$(".block").click(function(){})- block is the class name of DIV tag. });</script>