Loading Effects for Grid Items with CSS Animations
Some inspiration for loading effects of grid items using CSS animations. View demo Download source Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations featured in the demos are by Erika Mackley. So, we’ll use an unordered list for the grid and we’ll simply add the respective effect class: The idea is to add a class to the items already shown in the viewport when we load the page. There are a couple of things that we can set. Note that we had to remove the transitions for Masonry so that there’s no conflict with the animations. I hope you enjoyed this little experiment and find it inspiring!
The CSS Ninja - All things CSS, JavaScript & HTML
56 Pure CSS Effects Javascript Alternatives Including Demos | Designs Mag (Designs Magazine)
Cascading Style Sheet (CSS) is a document format which provides a set of style rules which can then be incorporated in an XHTML or HTML document. It is a means to separate web content from formatting and presentation information. Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community. This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. Hope you like this post, Please don’t forget to , and like our for recent updates. Naaz 55 Unique jQuery Techniques and Tutorials Nowadays websites are relying more on HTML5, CSS3 and JQuery for animation and If you are a part of ... 28 Excellent HTML 5 & CSS3 Tutorials and Techniques
PNG that works
Once you sprite your images, the next step is to compress them as much as possible. PNG is a great format for this, but… Yes, it does! No, it doesn’t! Which PNG? PNG supports various combinations of color depth, transparency and color correction. GIF-like PNG images with simple transparency are supported in all browsers (even as old as IE4) without any hacks, so whenever you can use GIF — don’t. You’ll get the same quality and compatibility as GIF, but a smaller file size. 24-bit PNG files have perfect quality, but perfection costs a lot of bandwidth. When you need full color, but don’t need transparency, use JPEG instead. This type is often mistaken for one and only true PNG, and infamously fails in IE6. Aside from the IE6 problem, this type creates pretty large files. If you’ve only ever used Photoshop, you may believe that this type of PNG cannot exist. With this type of PNG you get file sizes smaller than GIF, but retain ability to use several levels of transparency. I’m serious.
Transitions & Animations - An Advanced Guide to HTML
One evolution with CSS3 was the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now their wish has come true. With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted. Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state. There are four transition related properties in total, including transition-property, transition-duration, transition-timing-function, and transition-delay. In the example below the box will change its background color over the course of 1 second in a linear fashion. Box
Height equals width with pure CSS
Description If you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. The trick I found a solution which was already posted four years ago on A List Apart. <div class='box'><div class='content'>Aspect ratio of 1:1</div></div> We need two block elements to achieve the desired behaviour. So, what's this? So our box is already as high as wide. The content And here is the trick: We just position the content element as absolute with all four orientations set to 0. That's it. Other aspect ratios If you want to create other ratios just change the padding-top value of the pseudo element (see example): IE7 and below Since IE is IE and especially IE7 is everything but a browser, you have to create the pseudo element yourself in your markup if you like to support that shit.
lorempixel - placeholder images for every case
WebPlatform.org — Your Web, documented
Bootstrap Form Builder
Rendered source of your form: About Created By Adam Moore (@minikomi) to help take the stress out of writing all that markup to get bootstrap forms together. The original version of this was a big jQuery spaghetti mess, so as of March 2013 it has been rewritten using backbone.js and takes advantage of underscore.js templates. If you have a problem, or want a specific snippet added please check out the github project. Note, this is only a simple tool so I'm not that keen on adding many features (eg. saving/exporting forms, embedding forms etc.). Adding snippets is quite simple now (due to the rewrite!)
