Pure CSS Minimal Buttons. Crafting Minimal Circular 3D Buttons with CSS. The following post is written by Brandon Pierce.
Brandon saw some nicely designed buttons by Wouter on Dribbble and set about building them with CSS. They came out nicely and he agreed to post about the process here. Here's what we are going to make in this tutorial: The Base HTML We will be using a simple unordered list1 within a <nav> tag to create our buttons. Some Resources These icons in the buttons come from the Fontello icon font and web app.The textured background is from Subtle Patterns. CSS for the Icon Font There are a few ways to go about this, but we'll go with this: CSS for the Buttons The buttons will be arranged horizontally by making the list items inline-block. The lovely three dimensionality of the buttons comes from a subtle gradient and bevel and embossing courtesy of a pair of box-shadows, one normal and one inset.
We can flatten out the buttons a bit on :hover to create a pressed look. At this point our buttons should look like this: Not bad, but we have a ways to go. Create stepped navigation with arrows using HTML + CSS. In this tutorial I will show you how to create a stepped navigation with arrows using HTML and CSS which works in all major browsers.
It is useful to show a user a stepped process such as a multi part form where there is more than one step that needs to be filled in. Step 1: The HTML For the HTML we will use an unordered list so the navigation is accessible and will still partly work without the CSS file such as in text browsers. <? Show and tell for designers. Cheesy by Dribbble. People list by Ionut Zamfir. Squishy Toggle Buttons. Profile Box by Thibaut Ninove. @MyEnergy Mini-Profiles by Josh Hemsley. jQuery Infinite Slide Menu Plugin Preview. Nice Menu V1.0 Preview. CSS3 Button Generator. CSS3 Button Generator. CSS3 buttons by Chad Mazzola. Demo: CSS drop-shadows without images. Supersized - Full Screen Background Slideshow jQuery Plugin. Here it is, all the Supersized documentation you're so eagerly waiting to read.
Enjoy. Glossary Getting Started Options Variables Theme API Theme Variables First, you'll want to download the latest version of Supersized. Autoplay fit_always fit_landscape fit_portrait horizontal_center image_protect keyboard_nav min_height min_width new_window pause_hover performance random slides slideshow slide_interval slide_links start_slide stop_loop thumb_links thumbnail_navigation transition transition_speed vertical_center Determines whether slideshow begins playing when page is loaded. type : boolean default : 1 Prevents the image from ever being cropped. type : boolean default : 0 Prevents the image from being cropped by locking it at 100% width.
Prevents the image from being cropped by locking it at 100% height. Centers image horizontally. Disables right clicking and image dragging using Javascript. Allows control via keyboard. - Pause or play or - Next slide or - Previous slide Minimum height the image is allowed to be. Theme. jQuery FullScreen Plugin for custom Jimdo template - Freelance Web Designer - Milano. 50 New Free High Quality Icons Sets. Advertisement Feel free to make yourself a cup of tea or coffee right now because you’ll be investing an hour or so in today’s post.
We’ve published our last icons round-up1 six months ago and since then we’ve collected over 50 new free high quality icon sets that you can use for your projects. While most of the listed freebies may be used for commercial projects as well, some of them may not. However, you could use all of them in your private projects. If the set is available for private use only, it’s clearly indicated in the brackets next to the title of the set.
Please always read the disclaimers carefully before using the icons — they do change from time to time. Free High Quality Icon Sets Free Cupcake Icon3 Available in a variety of sizes (16×16px — 512×512px), this cupcake icon from ArtDesigner is a sweet addition to your icon sets. Paradise Cherry Icon7 (free for private use only) This refreshing Paradise Cherry icon is available in sizes between 64×64 px and 512×512 px. Footnotes. 22 Advanced CSS Text Effects And Web Typography Tips.