Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 | Blancer.com Tutorials and projects Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following… The effect is built up gradually and works on the latest Webkit browsers (Safari, Chrome), Firefox and Opera. Other browsers simply get some yellow squares. Step 1: The HTML and Basic Squares Let’s start with the simplest version that works across all browsers. <ul><li><a href="#"><h2>Title #1</h2><p>Text Content #1</p></a></li><li><a href="#"><h2>Title #2</h2><p>Text Content #2</p></a></li> […] </ul> Notice that each note is surrounded by a link which is always a good element to use as it automatically means that our notes become keyboard accessible. The CSS to turn this into the yellow squares is simple: We reset things the browser normally gives us like margins and paddings and the list style to get rid of the bullets of the list. This works for every browser out there – including IE6. Blancer
Infinite Animated Photo Wheel < CSS Our first attempts at using CSS 3D Transforms to create an animated photo carousel were not entirely practical as they were limited to a small number of photos. We had more luck using CSS to layout the photos in 3D space combined with JavaScript to iterate through the available photos with our Photo Rotator, but it was a bit boring with no movement effects. So then we wondered what would happen if the two techniques were combined. The following examples are working in Safari, Chrome, Firefox and Opera 15. 1. The HTML is very similar to previous examples. The inline style attribute references the animation @keyframes below. 2. The CSS styles are used to position a number of photos by first rotating them about the y-axis (which runs vertically up the page) and then translating them outward radially (a la Stonehenge): The value of -81px is to move the photos left so that the forward facing photo is centred across the rotation axis. 3. 4. It's not clear why setTimeout is required here. 5. 6.
CSS animations Configuring an animation To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in the Defining animation sequence using keyframes section below. The sub-properties of the animation property are: animation-composition Specifies the composite operation to use when multiple animations affect the same property simultaneously. animation-delay Specifies the delay between an element loading and the start of an animation sequence and whether the animation should start immediately from its beginning or partway through the animation. animation-direction animation-duration Specifies the length of time in which an animation completes one cycle. animation-fill-mode animation-iteration-count animation-name css
Useful Coding Tools and JavaScript Libraries For Web Developers Advertisement Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices. Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Useful Coding and Workflow Tools Stripe: Easy Credit-Card Processing For Online StoresA website owner has many options for accepting credit card payments. Last Click Stay Tuned! You won’t regret it.
CSS Practice: Pseudo-Namespaces in Complex Projects · Jens O CSS Practice: Pseudo-Namespaces in Complex Projects Jens O. Meiert, March 21, 2007 (↻ August 16, 2013). This entry has been written by Jens the Web Developer. Working in complex projects or in projects that don’t provide a good overview of forthcoming page types and elements may require a defensive strategy for writing CSS. This namespace concept is only roughly similar to that in XML. Examples for CSS Pseudo-Namespaces Special icons for certain links mean an artificial example yet a good start: Assume you want to equip certain links (for example those for file types or for actions) with different icons. This is fine (though you could cultivate that with an additional file class, for example). You can of course address this issue with context dependent formatting (a.doc vs. div.doc), which is usually an advisable thing. A “pseudo-namespace” might help, for example: The nf- prefix is of course arbitrary, in this case meaning “namespace [for] format”. .nf-doc {} .nf-pdf {} .nf-ppt {} Read More
CSS Animation We have another cool new CSS feature to talk about: animation specified in CSS. There is a lot of ground to cover here, so we’ll start with the basics first. The simplest kind of animation that we’ve added support for is called a transition. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the element in question changing immediately from the old property value to the new property value. Transitions are specified using the following properties: transition-property – What property should animate, e.g., opacity.transition-duration – How long the transition should last.transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).transition – A shorthand for all three properties. Here is a simple example: This div will fade out when hovered over. For example: In the above style rule, opacity will animate over 2 seconds, but left will animate over 4 seconds.
Bouncing Ball Animation < CSS Tweet10 Shares5 Shares0 Tweets6 Comments Following on from our introduction to CSS Transforms, and using lessons learned from implementing 3D Transforms and Animations, this article presents an animation of a bouncing ball - for now just in two dimensions, but it shouldn't be too much of a step to move to three. These animation will now work in Safari, Chrome, Firefox, Opera and Internet Explore 10. Not all browsers support 3D transformations so the effect can be less dramatic. 1. For this animation we're going to use two keyframes - one to translate the ball horizontally with a constant velocity and a second to apply a roughly parabolic vertical bouncing motion. The horizontal motion can be easily implemented using the following keyframe: This keyframe will be referenced later using the assigned name 'travel' and applied using a linear transition timing function that changes direction with each iteration. This keyframe has been named 'bounce' for future reference. 2. 3. 4. 5.
Controlling CSS Animations < JavaScript This page presents a simple game of Concentration using JavaScript events and CSS transforms to provide real-time effects. The mechanics of the game are not so important, the aim is mainly to show how we can trigger animations using JavaScript events instead of just using the :hover event or keyframes. The example below is working in WebKit browsers (Safari, Chrome, iPhone/iPad), Mozilla browsers (Firefox) and Opera. 1. Here you can see the final product. The goal of the game, as you probably already know, is to turn over two cards with the same value to make a pair. You can find an upgraded version further down the page, including a standalone demo. 2. The HTML code for this is actually very simple: <div id="stage"><div id="felt"><div id="card_0"><img onclick="cardClick(0);" src="/images/cards/back.png"></div><div id="card_1"><img onclick="cardClick(1);" src="/images/cards/back.png"></div><div id="card_2"><img onclick="cardClick(2);" src="/images/cards/back.png"></div> ... 3. 4. 5. 6.
benbarnett/jQuery-Animate-Enhanced Introduction au CSS3 - Partie 5: Les multiples colonnes Le CSS3 présente un nouveau module connu, à juste titre, en tant que mise en page en multi-colonnes. Il permet de spécifier en combien de colonnes le texte doit être divisé et comment celles-ci doivent apparaître. Comme d'habitude, des exemples peuvent être trouvés ci-dessous : Voir la page d'exemples Actuellement, cette propriété est disponible sur Firefox et Safari 3. Il y a quatre propriétés qui se rapportent à la mise en page de multiples colonnes en CSS3, permettant de définir le nombre de colonnes, la largeur, l'espace entre chaque colonne et une bordure entre chacune d'elles : column-count column-width column-gap column-rule Actuellement, un préfixe propre au navigateur est également nécessaire pour définir comment Safari et Firefox doivent afficher la propriété. Dans certain cas, vous voudriez peut-être qu'un élément enjambe plus d'une colonne (un titre, une table ou une image par exemple). Tous mes remerciements à Bovino pour sa relecture.
Nicer Navigation with CSS Transitions - GetHiFi Update: March 21, 2014 - We have an updated post after years of practice with these techniques. Newer versions of Apple's Safari web browser (and Google Chrome, which is also based on Webkit) support a vendor-specific implementation of the CSS3 Transition property. CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects. Quick Overview There are three properties that make up the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three: -webkit-transition. -webkit-transition-property: This specifies which properties of the element will be animated. -webkit-transition-duration: The amount of time from the beginning of the transition to the end. -webkit-transition-timing-function: There are a number of timing functions—mathematical models for how the transition takes place—that you can choose from. A Simple Example
3D Transforms and Animations < CSS 3D Transforms were first implemented by the Safari/WebKit team ages ago. Support in other browsers is still variable, but getting better. CSS3 animation and 2D transforms have been implemented in Safari, Firefox, Opera and even Internet Explorer 10, but in this article we're taking it a step further using keyframes to set up perpetual animation effects in 3D space. These effects will work in WebKit (Safari/iPhone/iPad and Chrome) and Mozilla (Firefox) browsers. Some simpler effects will work in Internet Explorer 10, but they don's support the preserve-3d setting needed for proper 3D layouts. 1. What are keyframes? A @-webkit-keyframes block contains rule sets called keyframes. While this may sound complicated, and can be, we're starting with one of the most simple examples. In this example the keyframe has been assigned the name 'spinner' for later reference. 2. The 'stage' is the element in which our animation takes place. The next element is the one to which the animation is applied. 3.
40 Must Learn Text Effect Tutorials in Illustrator Tutorials January 31, 2011 The love of creating text effects has become a common ground for many designers and enthusiasts. Indeed, it has even become an art form in itself. It would be best to learn from other artists every now and then. Check out these 40 Must Learn Text Effect Tutorials in Illustrator and be inspired to create your own masterpieces; you could even share your work with the rest of the world right in the comments below! Create a Green Viscous Text Effect In this tutorial you will use illustrator’s 3D tools to add dimension on the text, and then add a green viscous text effect.. Learn to Create a Variety of Script Lettering This tutorial will showcase three different approaches, which result in three different script lettering styles. starting with a nice simple basic script, touch on a more athletic inspired lettering style and work along the way to a classic, fancy script. How to create a glassy text effect in Illustrator How to Create an Entangled Lettering Illustration