Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead. Enjoy
Clearing a float container without source markup (This clearing technique was developed by Tony Aslett, of csscreator.com. The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. <div><!
Animated CSS3 cube using 3D transforms Last week WebKit included the much anticipated (at least on my part) 3D transforms in its latest nightly build, announced practically alongside the awesome Snow Stack demo that provides a 3D interface for browsing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more exciting demos, including “Morphin Power Cubes” and “Poster Circle”. It is now possible to create all sorts of crazy three-dimensional and animated user interfaces; the power comes largely in -webkit-perspective and a number of updated transforms–adapted to incorporate the Z axis. Since working on the 3D cube using 2D transforms back in April I’ve experimented with perspective to create something more powerful, playing around with 3D transforms on the iPhone a few times (e.g. this early rotating demo). A 3D cube can be created solely in CSS, with all six faces. Result A 3D cube that rotates using the Up, Down, Left and Right arrow keys. How To
Downloading a Complete Picasa Web Album (Without Installing Picasa) | fredericiana Google's Picasa Web Album supports downloading an entire album, however, it requires the Picasa software to do so. Bummer if you are on a Mac, or don't want to (or can't) install Picasa on your computer. There's another tutorial online that suggests using a Greasemonkey script to surface the download links, then use the DownThemAll Firefox extension to grab the links. Sadly, the Greasemonkey script in question stopped working after a recent code change on the picasa website. However, I found an alternative solution: The album's RSS feed! Go to the desired Album, and click the "RSS" link on the right hand side: Firefox will show you the RSS feed in a more or less appealing way. The only thing we need to do is download all of these with DownThemAll. Just hit "start" and let it load! Hope this helps!
Beeindruckende Effekte mit der CSS-Eigenschaft text-shadow | onlinecasinodemar.com Moderne Browser können es schon. Des Webdesigners natürlicher Feind IE verweigert sich noch. Mit der CSS3-Eigenschaft text-shadow lassen sich tolle Effekte erzielen. Besonders interessant wird es, wenn man mehrere Textschatten auf einmal anwendet. Effekte wie Letterpress oder glühender Text sind dann wenige Zeilen CSS. Für IE-Nutzer! CSS-Eigenschaft text-shadow Viele von Euch kennen sie sicher schon und man sieht sie im Web immer häufiger. Sprungmarken Die Schreibweise Bemerkung: Der Aufbau von text-shadow ist einfach. Beispiele einfacher Textschatten Es ist also auf einfache Art und Weise möglich, einem HTML-Text mit text-shadow eine gewisse Tiefe und Plastizität zu verleihen. Beispiel für einen weißen Text auf dunklem Hintergrund mit einem schwarzen Textschatten. Das CSS dazu: background:#404040; color:#fff; text-shadow: 1px 1px 0px #000; Auf hellem Hintergrund mit dunkler Schrift kann ein weißer Textschatten interessant wirken. background:#ccc; color:#505050; text-shadow: 1px 1px 0px #fff;
Creative CSS3 Animation Menus Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: As we are using a symbol font for the icons, we write letters for the icons. The CSS The common style for all the examples will be the inclusion of the symbol typeface: Example 1 Example 2
Creating a Marble Style CSS3 Navigation Menu CSS3 Green Marble Menu In our new tutorial we’ll create a new horizontal dropdown CSS3 menu. This menu will be suitable for black and for white websites. It made of green marble colors. Here are final result (what we will creating): Here are samples and downloadable package: Live Demo download in package Ok, download the example files and lets start coding ! Step 1. As usual, we start with the HTML. index.html Step 2. Here are the CSS styles of our dropdown menu. css/menu.css Conclusion Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment :) Good luck! If you enjoy our articles, feel free to share our tutorials with your friends.
Dark Menu: Pure CSS3 Two Level Menu [Tutorial] - Ahmad Hania Blog Some days ago we released a Freebie called Dark Menu in Free PSD and in this easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects. Now, if you aren’t so familiar with CSS3 you can either learn about it at CSS3.info or at W3Schools. You can also use this online CSS3 generator to help you create these styles easily. Off course you need to put all HTML code inside an HTML document and all the CSS styles either in the HTML document header or in a separate CSS file. All colors, effects, shadows are taken from the Dark Menu PSD file. Adding HTML Content for The Menu Now we are going to add the HTML content for our dark menu, and here we are using a simple unordered list with list items as you want and a sub menu using also an unordered list with list items as you wish. DemoDownload
Tutorial to create a Beautiful, simple, horizontal CSS menu | Tutorial to create a Beautiful, simple, horizontal CSS menu This is a very simple, horizontal css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. First of all let us write CSS code for menu. here goes the code.. [code lang=”css”] Second of all let us write HTML list for menu. Say we have 7 links, as shown in image, here goes the code.. [code lang="html4strict"] [/code] Yeah..! Check out the demo below.. Create an apple style menu and improve it via jQuery Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery. This is what we are going to build (don’t forget to hover over the menu) Since the Tutorial is rather long and comprehensive here is a short overview of the upcoming tasks: Part 1: Conceptional work First of all you should do some conceptional work since you need to know the height of your menu itemsyou need to know the width of your menu items, both in normal and hover state.you need to know how many items you want Part 2: Photoshop Part 3: HTML and CSS
monty lounge industries - simple.creative.powerful web strategy, design, and development