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.
SpritePad - Create and edit css sprites Totem: A Vertical Ticker jQuery Plugin Features Totem makes vertical tickers easy to implement by: Turning a list of items into an animated ticker that auto-advancesSpecifying anchors for stop, start, next, and previous navigation links. Installation Load jquery.totemticker.js or the minified jquery.totemticker.min.js script. Demos Use cases with varying options. Default settings w/ mouseover and navigation Options The following options are available via the plugin array. next : null previous : null stop : null start : null row_height : '100px' speed : 800 interval : 4000 max_items : null mousestop : false direction : 'down' previous, next CSS ID's of next and previous buttons. start, stop CSS ID's of stop and start buttons. row_height Height of each ticker row in PX. speed Speed of transition animation in milliseconds. max_items Optional. mousestop If set to true, the ticker will stop while mouse is hovered over it direction Direction that list will scroll (down or up) Some Notes License Released under the MIT License
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.</div> 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. Supporting Browsers At the time of writing the following browsers support the CSS3 text-shadow property:
Dot Navigation Styles Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For the structure we’ll have an unordered list with links: <div class="dotstyle dotstyle-fillup"><ul><li class="current"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Products</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></div> For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style. We define some common styles:
CSS3 Grid Accordian using :target Information Click any of the above 'thumbnail' images to expand them to full size. Once expanded then the large image will stay visible even if clicking elsewhere on the page. Click the 'RESET' button to return the grid to its initial position. IE9 will see an instant jump in the size of the images, but all other browsers will see these animate to their new sizes. This uses :target with the general sibling selector and there is no jump to the top of the browser window when clicking the thumbnails. 27th June 2012 - recoded and restyled to remove the need for :target and the problems with the browser 'back' button. Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright.
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. My experiment was actually inspired by Edenspiekermann’s Open Type project for the Kröller-Müller Museum, a dynamic concept that plays with light and shadow in a simple but incredibly creative way. The aim of this tutorial is to show how we can bring some life to letters using CSS transforms and transitions on pseudo-elements with a technique that will allow to open a letter from all four sides. Please note that pseudo-element transitions don’t work in every browser. The Markup The CSS Let’s add some basic styles to the letter span. At this point it’s time to add our transformations.
Animated Checkboxes and Radio Buttons with SVG Previous Demo Back to the Codrops Article How do you collaboratively administrate empowered markets via plug-and-play networks? Where do you proactively envision multimedia based expertise and cross-media growth strategies? Why do you interactively procrastinate high-payoff content without backward-compatible data? How would you dynamically target high-payoff intellectual capital for customized technologies? How can you appropriately empower dynamic leadership skills after business portals? How do you interactively productize premium technologies whereas interdependent quality vectors? Do you rapaciously seize adaptive infomediaries and user-centric intellectual capital and how? Your to do list to uniquely deploy cross-unit benefits with wireless testing procedures: If you enjoyed these effects you might also like: Animated Border Menus Creative Button Styles
Grid Accordion Grid Accordion combines the functionality of a grid gallery and an accordion slider, offering you an interesting method to display your portfolio. For Designers For Developers Modular architecture – the plugin consist of several modules and you can build your own script, containing only the features you will be usingCSS3 transitions and RequestAnimationFrame – modern animation techniques are used in order to provide smooth animationsPowerful API – Grid Accordion provides multiple public method and callback functions, and also the possibility to change the properties on runtime You can read more about the above features and see them in action here. If you have any questions or need assistance integrating the accordion, please feel free to ask; I will gladly help you. Most of the buyers give this script 5 stars but if you plan to rate it lower than 5 stars I would really appreciate if you contact me first with your suggestions/complaints; maybe I can resolve those issues Thank you! Changelog
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. 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. We have a problem So far, our technique is incomplete. Potential orphans and actual orphans Update
"Look Inside" Book Preview with BookBlock A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation. View demo Download source There is something really fascinating about (real) books. Although we live in times where everything is digitalized by now, there is really nothing like picking up a real book and browsing through the pages. Please note that this is just a proof-of-concept and might not work properly in older browsers. For the book grid we use figures and this is how it looks: When we click on “view details”, we rotate the book in 3D and move it to the left side, allowing for the details to slide in from the right: Once “look inside” is clicked we perform a series of animations on the book, its cover and the BookBlock. Credits I hope you find this interesting and inspiring!