Animated Opening Type A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann's Open Type project and it's a very creative way to display and play with letters. View demo Download source In this tutorial I’m going to explain how to achieve an interesting 3D opening type effect with CSS based on the one I previously created. Please note that pseudo-element transitions don’t work in every browser. The Markup The markup needed is pretty simple, just a span that contains the character, but since we’re going to work with generated content we must add a custom data-attribute for repeating the text of each letter. The CSS Let’s add some basic styles to the letter span. Note that we have also added position:relative to the span because this will make the pseudo-elements’ absolute positioning work. To clone the characters we use the content property to access the custom data-attribute.
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development Quick Tip: Add Keyboard Shortcuts To Your Web App Nick Anastasov We power users love our keyboard shortcuts. We use them everywhere – in our code editor, in Photoshop, in gmail. And we hate it when we hit Ctrl+S in a web app, only to see our browser offering to download it. 1. Single keys are easy. After hitting the run button, focus the editor by clicking on it. <div class="content"><ul><li>Try pressing <a class="button c55"><span class="key">7</span></a></li><li>Or you can try hitting <a class="button c191"><span class="key">/</span></a></li><li>Even special keys work <a class="button c27 fn esc"><span class="key">esc</span></a></li></ul><div class="keyboard-answer"><h3>You pressed <span></span></h3></div></div> Run 2. Mousetrap shines when listening for more complex key combinations like capital letters and special symbols. 3. Combinations that involve the Control key are equally easy (see the next example for how to listen for both Control and the OS X Command key). 4. 5. Conclusion This was our quick tip on keyboard shortcuts.
Tetris & The Power Of CSS To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors. The four stages of CSS:1. They forget that all preprocessors do is make writing CSS easier, not qualitatively different: It's still CSS that comes out of the end. Put down your classes, ladies and gentlemen, because we're talking about dynamic content and they cannot save you now. Incomplete grids Let's imagine we have a three-column grid but that we don't know how many items will be in that grid. Now, I'm the sort of designer who couldn't give a toss about "pixel perfection" so long as the page is usable and accessible. We could do this by adding some logic to the template and writing a last class to whichever item comes last.
javascript phanan/htaccess High Performance Animations We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. Take a look at this side-by-side slow motion video of the same animation: One is done with transforms, the other isn’t. From DOM to Pixels in DevTools When you use the Chrome DevTools timeline you should see a pattern similar to this: The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing -- transform and opacity. Animating Layout Properties
Your Web, documented · WebPlatform.org CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. Technique #1: Absolutely positioned element I have set up a pen on Codepen so you can test the result of this technique here.
Ruby QuickRef | zenspider.com by ryan davis Table of Contents Language General Tips These are tips I’ve given over and over and over and over… Use 2 space indent, no tabs. Use [] over Array.new. See for more. General Syntax Rules Comments start with a pound/sharp (#) character and go to EOL. Reserved Words alias and BEGIN begin break case class def defined? Types Basic types are numbers, strings, ranges, regexen, symbols, arrays, and hashes. Numbers 1231_234123.451.2e-30xffff 0b01011 0377 ? Strings In all of the %() cases below, you may use any matching characters or any single character for delimiters. %[], %!! 'no interpolation'"#{interpolation}, and backslashes\n"%q(no interpolation)%Q(interpolation and backslashes)%(interpolation and backslashes)`echo command interpretation with interpolation and backslashes`%x(echo command interpretation with interpolation and backslashes) Backslashes: Here Docs: Encodings: Waaaay too much to cover here. Symbols Internalized String. Ranges Files
Text Shadow Generator | CSS3 Generator | CSS3Gen Use this CSS3 text shadow generator to easily add text shadow styles into your web project. Your browser does not support the CSS3 text-shadow property. You can still use this tool to generate the CSS3 rule, but you won' be able to see the results. <div class="error_msg">Please enable Javascript to use this page. Text Shadow Explained The CSS3 text-shadow property is one of the most popular techniques of progressively enhancing the design of a website. The text-shadow property is really simple to use. It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow and the last value sets the colour. While this is relatively easy to remember compared to other CSS3 rules such as border-radius, it is useful to have a generator such as this so that you can generate your text-shadow in real time and fine tune it with Photoshop-like controls.
Techniques for Creating Textured Text In this article we'll explore all the current techniques for creating image or texture filled text and show you how to apply them. View demo Download source In this article we’re going to explore several techniques that can be used to create textured text or apply a background to text. Please remember that some of the techniques covered in the article are experimental with very low browser support, and may not be the best technique to use when you’re building real projects that need wide browser support. I’ve included a screenshot for each demo, the link to the demo in the end of each technique. Applying an Image Background to Text Using -webkit-background-clip: text We’re going to start with the CSS background-clip property and use it to get the following result: The CSS background-clip property determines an element’s background painting area, which is the area within which the background is painted. We’re going to use a “fat font”, so that the background is more visible through the text.