80+ Free Editable PSD Website Templates | chethstudios Design Magazine
Back with another resource roundup. Here are Free Editable PSD Website Templates for designers and developers. Its great for newbies who want to learn designing who can simply download these files and expand the layers to study them to learn the tricks of the trade used by different designers. Related Posts:Roundup of Best Free Smart Phones GUI PSD PacksUseful Free Web UI Elements PSD Packs80+ Free PSD Web UI Elements For Download Cut down your exam stress by using our latest HP0-P15 exam and high quality SY0-201 and vmware certification demos.
Make Your Mockup in Markup
We aren’t designing copies of web pages, we’re designing web pages. Andy Clarke, via Quotes on Design The old way I used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup. Does this process sound familiar? That process is whack, yo! Recently, thanks in large part to the influence of design hero Dan Cederholm, I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser. Die Photoshop, die Some of you may be wondering, “what’s so bad about using Photoshop for the bulk of my design?” The application Adobe Photoshop CS4 has unexpectedly ruined your day. Photoshop’s propensity to crash at crucial moments is a running joke in the industry, as is its barely usable interface. Text rendered in Photoshop (left) versus Safari (right). A necessary evil? Get started by getting naked
New High-Quality Free Fonts
Helps Make the Internet - Making @font-face work on Tumblr | Justin Dickinson
The other day I was messing around with the theme for A Variety of Things* and wanted to use a custom font. I headed to Font Squirrel** and downloaded myself a @font-face kit. For ease of use I decided to host an external CSS file on my server and just point to it in the theme. Chrome worked fine, then I tested Firefox: no go. I wasn’t ready to give up. Instead, I opted to go the route of Base64 encoding. I used the encoder here and used the following format that I found here. This worked like a charm. * A Variety of Things is my other blog that seeks to catalog and collect all the awesome I see online. ** If you use Font Squirrel’s @font-face generator you can opt to have the font you upload encoded in base64 right from the start.
Type study: An all CSS button
This is part of a series of guest posts covering tips and tricks for working with fonts on the web. Today’s post was written by Dan Cederholm of SimpleBits. A few years ago I gave a talk about why a button made a great place to bring in type from a branding element (such as a logo). My point was that if the type in your logo was an image, and stylish buttons were also often images, then why not align the fonts in both to bring some cohesiveness to the typography. This was probably four years ago, and we’ve come a long way since. The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment. Let’s build a button, friends. The markup I’m going to use a hyperlink in this example, but the styles we’re going to add could just as easily be applied to a <button> or <input> element as well. <a href="#" class="btn"><span>Press this! Notice the extra <span> element here. Adding the styles And voilà.
Nice And Simple Toolbar For Your Website With CSS3 And jQuery |
During these months I’ve learned an important lesson as blogger. If you want to start an activity on the web with a blog, magazine or a general website, you must plan a clever action on the Social Networking and Bookmarking websites. Often it’s an hard thing to interface a website with the many available social services, but recently there are some famous blogs, like Abduzeedo and Mashable, that are using a fixed toolbar on the bottom of the page with useful button for the sharing. There are services, like Wibiya, that allow to add a toolbar in a few steps, but why don’t you create a really custom panel using your CSS and jQuery skills? In this tutorial we’ll learn how to build a nice toolbar for our website using some CSS3 properties and basic jQuery techniques. The Idea Behind Our goal is to realize a fixed panel, on the bottom of the page, to improve interaction with our users. So a panel with social icons and their tooltip bubbles on the left side and a quick menu on the right.
tinytype
Owner's Manual Perhaps a more accurate description would be an incompatibility table. This shows the state of default system fonts across the most popular platforms. I put this together as a way of finding alternatives to certain webfonts when page weight starts to get too heavy. Notes and Resources Android fonts from versions 1.6 and up except Roboto which exists on version 4.0/Ice Cream Sandwich and up (ht — Stu Robson).
Typography Effects with CSS3 and jQuery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. View demo Download source Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines. The image used in the demo is by Andrey & Lili. The HTML The structure will simply be an h2 element with an anchor inside. Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span. Now, let’s take a look at each example. In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. Example 1 In the first example we want to skew the letters in order to create bit of perspective. Example 2 Example 3
