2008: The Year of the Texture 2008 was a big year for textures. Never before has there been such a vast amount of high quality, free textures readily available to the design community. In typical end-of-year fashion, I thought I would do a massive round-up of some of the best texture resources to come out in 2008, including websites, blog posts, and everything else texture related. Enjoy the list and here's to 2009! ***If you have any links that I didn't cover please share them in the comments. If you've used L&T textures in commercial work or earned a profit from them in your designs, please consider making a donation to Lost & Taken. Texture WebsitesHighResolutionTextures.com highresolutiontextures.com is foremost meant as a resource website for everybody that loves high quality textures and patterns or for designers and artists that are using textures in their creations Texturise.com Texturise is a blog-style website focused on giving away high-res textures for personal and commercial use.Stockimagine Blog Posts
CSS Quick Tutorials tools & resources for web professionals These materials are copyright Western Civilisation Pty Ltd. www.westciv.com They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses. Please see our website for detailed copyright information or contact us info@westciv.com. quick tutorials If you already know what a style sheet is and how to link it to your page, and how to specify selectors, properties and units with CSS, then in some ways the rest is detail. Can't find what you want to do here? resources
Break Coders Block! Over the last few years web browsers have made a lot of progress to add new features based on what is shaping up to be HTML5 and CSS3. I’ve already demonstrated what can be done with new CSS properties such as the CSS border-radius property. Now, I’ll cover the CSS box-shadow property. Using box-shadow This tutorial will demonstrate how to add shadows to a div HTML element using the CSS box-shadow property. As you can figure out by the property name, the box-shadow property can be used to create a shadow outside, or inside of your div box. The first numeric value in the box-shadow property is the length of the shadow on the horizontal side of the div box, the second numeric value is the length of the shadow on the vertical side. By default, having positive values for the horizontal and vertical blur length will produce a blue on the lower right of the div tag. Using box-shadow with inset You can add an additional value, inset, to force the shadow to be inside of the div tag.
HTML5 Reset How To Build A CSS3 Sliding Menu It’s often best to put things away until you need them. Navigation menus are a good example. If I’m reading an article, I don’t want a large proportion of screen real estate taken with links — especially on a mobile device. In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect. This is what we’ll achieve: View the CSS3 sliding menu demonstration… There are various solutions throughout the web, but I struggled to find one matching my requirements: It must use clean semantic HTML5 with no superfluous tags.It must not rely on JavaScript.It must not require additional graphics.It must work on mobile and tablet touch devices.It must degrade gracefully in older browsers (IE7+) or when specific CSS3 properties are not supported.It must look great! Open your favorite editor and let’s get coding… The HTML CSS: Article Styles We’ve also defined the transform-origin to the middle of the left-hand edge.
Beautiful web-based timeline software 50+ Sources To Download High-Quality Free Vector Stuff | Showcases Now days, Vector art needs no introduction. It’s always handy to have a collection of pre-made vector objects to express your creativity in your designs, as vectors are very easy to boost up to any dimension without loosing the quality of your image graphics because there is no fix resolution for vector images. It’s not a easy job to find a best, or i must say the perfect piece of vector art for your design. However, there are quite a few resources around the web. Still, it’s quite a complex task to perform. You may be interested in the following related articles as well. Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful. Don’t forget to and follow us on Twitter — for recent updates. Sources to Download High-Quality Free Vector Stuff 01. vecteezy 02. vector4free 03. dezignus 04. qvectors 05. dryicons 06. 07. coolvectors 08. vectorvalley 09. vectorportal 10. vectorart 11. 123freevectors 12. freevectors 13. dapino-colada 14. vectorstock 15. deviantart
How To Vertically Center Unknown Rows Of Content Inside A Fixed Container One task css doesn’t make easy is centering objects vertically within their containers. Last summer I offered 6 methods for vertical centering to address that difficulty. The methods generally require knowing in advance the heights of the parent and child elements. What do you do when the child element’s height isn’t known? I´d like to ask you about vertical centering a child element with a variable height. My initial thought was Javascript would be needed to determine the total height of the child elements, but I thought why not take a look at each method and see what I could come up with. Vertical Centering with CSS Here’s a quick reminder of the methods for centering. I didn’t look at the line-height method, since it’s for centering a single line of text and Manuel’s question referred to images. There’s an assumption with all of these methods that the height of the parent is known as is the height of each child element. CSS Table Methods The empty rows are what do all the work here.
CSS Infographic – Interesting Facts and History Do you know much about CSS? Well ok, we admit you may know a lot about how to work with it and how to make your website look really stunning with various useful CSS features. But what we’re sure you don’t know about CSS is its major historical milestones as well as some facts related to CSS functionality. This infographic will also be interesting and useful for CSS beginners and will help them learn the very basics of this technology. About the Author Edward Korcheg Edward has been with TemplateMonster blog since 2009 and is a great fan of social media and web development trends (especially jQuery and HTML5).
6 Methods For Vertical Centering With CSS Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. I’ve usually skipped over the topic of vertical centering, since there are some good posts already out there that are easy enough to find, but recently Bikram commented requesting a tutorial on vertically centering so I thought why not. You can view demos of each of the methods below by clicking here. Let’s start by first talking about something that doesn’t work as many expect. Vertical-Align Horizontal centering with css is rather easy. With text-align: center in mind, most people look first to vertical-align in order to center things vertically. However valign only worked on table cells. The values for vertical-align have meaning with respect to a parent inline element. Line-Height Method html css Centering an Image with Line-Height CSS Table Method Floater Div Summary
CSS Cheat Sheet (V1) - Added Bytes A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information. There is a newer version of this cheat sheet! The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. Properties List The CSS specification includes a lot or properties, many of which are often forgotten or overlooked. Syntax Syntax is one area in CSS where many people stumble when learning it. Selectors Given the number of possible selectors in CSS, it is no wonder some people often become confuse. Pseudo-Selectors Pseudo-selectors are used when defining styles for elements that either do not exist, or are in a particular state. Please note - I have left the :before and :after pseudo-selectors off this list, as I felt generated content was too complex to add to this sheet and still define in a way that made that area of the sheet usable. Media Types Box Model Units Properties that Inherit Download
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.
CSS Lists & Counters Module Level 3 Abstract This draft contains the features of CSS level 3 relating to list styling. It includes and extends the functionality of CSS level 2 [CSS21]. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction This is an early-stage working draft. This specification defines the ::marker pseudo-element, the list-item and inline-list-item display values that generate markers, and several properties controlling the placement and styling of markers. It also defines counters, which are special numerical objects often used to generate the default contents of markers. It should produce something like this: (i) This is the first item. 2 Declaring a List Item list item The