background preloader

How To Create a Pure CSS Polaroid Photo Gallery

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling. View the Demo Check out the demo to see what we’ll be building. Start work by sourcing your images. Next, set up the basic page structure with a container centered on the page. Semantically lay out the collection of images in an Unordered List element, and wrap each image with an anchor to create a clickable link. Now we get start work on the CSS to style up the gallery. Give the images the Polaroid effect by adding a few styles to the anchors. To really add realism to the design, use the CSS3 box-shadow property to add some shading to the photos. Now we need to target each image individually, so go back and give each anchor a unique class name. With unique class names in place, we can then add unique styling to each photo. That’s all there is to it!

Pure Css Data Chart Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css? Take a look at the Demo | Download Css Chart Approach In this example I am not using JavaScript or any backend application. what I’ll do here is turn this: into this with css alone. The markup In my example I have used a period of last 12 days and presented my working energy level in percentages, 100% being the best I’ve felt about working ever. Anyway, to structure this kind of data I chose definition list. <dt>Day 1</dt> And definition description contains the value <dd>36</dd> Inside the definition description element I will add a span and nested em element. <dd><span class="type2 p80"><em>80</em></span></dd> Styling it Definition titles have no visual purpose here, so I’ll hide them: Moving on to the real thing. Here’s the scheme of one chart bar

Guide to CSS support in email clients - Articles & Tips Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients. To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook ’07/’10/’13. 19 September 2013 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010

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. 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 The CSS is as simple as the markup. Summary Take the timeline a step further. Further Reading

Free “Site Under Construction” Template - OurTuts.com Hello everyone…This is the first post in the new “Freebies” category and I want to celebrate this by offering you something original and special.I`m giving away a free “Site Under Construction” Template ,to use it whenever you have a new website to launch or a re-design of your old website,or for anything else. This template is a simple one page “Under Construction” template that allows you to keep your users informed,while you work at your website.The template has a jQuery slider containing 3 slides:one with your social pages,like Twitter or Facebook,one with a subscribe-by-mail form and another one with an area for writing what you do.I thing it`s very useful.Now you have to convince yourself of its functionality. Main features of the Template jQuery Countdown Script-thanks to Keith Wood.Valid PHP e-mail subscription form-thanks to Abraham Soria from MetaMindVisualjQuery Slider.PSD File included Modern and clean web typeface. Agreements Just change the date with your own date.

An Introduction To CSS3 Keyframe Animations - Smashing Coding Advertisement By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module1 in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it. A Simple Animated Landscape Scene For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. (NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly. I’ll describe the CSS related to only one of the elements: the animated sun. The @keyframes At-Rule Here’s the @ rule we’ll be using: @keyframes sunrise { }

AS3 G94 Circular Menu › Actionscript 3.0 Version of the Circular Group94 Menu I’ve received quite a few requests to update my circular group94 style menu to AS3 (I’m not really sure why I’m still calling it a “Group94 menu”, but it’s a tribute to them that this style of scrolling navigation is often referred to as a “group94 menu” and not an “offset scrolling menu” or something of that nature). Anyway, I have been thinking for some time that I should revisit this script and build a more complete version, where horizontal, vertical or circular are simply parameters for the menu, but for now, this is both an update and a massive enhancement of the AS2 G94 circular menu. If you play with the demo, you’ll notice I’ve added some new features, such as the ability to easily change (at runtime of desired) aspects of the menu like the inner radius, item spacing, visible items and much more. There are also some easy methods for scrolling the menu. For example: Download: Group94 Style Circular Menu Enjoy!

CSS3 Animations I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations (CSS Animations Module Level 3 specification). What are CSS Animations? CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes. A simple example Let’s take a look at the code for a simple CSS3 Animations example: 01..animation-container { 02. 03. 04. 05. 06. 09. 10. from { 11. width: 200px; 12. background: #f00; 13. opacity: 0.5; 14. 16. to { 17. width: 400px; 18. background: #ffffa2; 19. opacity: 1; 20. There are a number of new things we see above. The most interesting part here is the animation name, which is, contrary to what you might believe, any name of your choosing. In this example, the element will rotate to being straight, fade in and become twice as wide at the end of the animation. Using keyframe values and iteration-count 02. height: 60px; 03. padding: 10px; 05. 08. 10. width: 200px;

CSS only menus Latest Demonstrations A CSS ONLY click action tree menu v321-01-2017A third responsive multi-level tree menu with slide action A CSS ONLY click action tree menu v216-12-2016A second responsive multi-level tree menu with slide action A CSS ONLY click action tree menu17-11-2016A responsive multi-level tree menu with slide action A CSS ONLY click action concertina menu14-11-2016A responsive multi-level concertina menu with bounce A CSS ONLY click action slide in menu29-10-2016A responsive multi-level slide in menu A CSS ONLY click action flexbox menu13-05-2016An accordion menu using flexbox and order animation. A circular menu with bounce09-03-2016A CSS only circular menu with bounce animation using cubic-bezier animation timing A responsive swipe-momentum menu24-02-2016A responsive swipe action momentum menu suitable for all the latest browsers and OS. A responsive multi-level menu14-05-2015A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.

70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. HTML 5 Resources

Related: