Nil Gradisnik : CSS inverted border radius
Everybody knows how to make rounded borders, it's right there in the CSS3 spec. Ever wondered how to do borders with radius inverted in pure CSS? I was facing this challenge a while ago and I just wanted to share the results. You start off witht this HTML structure As you can see it takes quite a few extra DOM elements to achieve this. The following CSS will do the trick You can control the border radius by changing the width and the height of the .inner i and adjust the margins accordingly, which is half of the width/height. One thing to note about this is that you will need a solid background color of the parent container. You can see the results at the bottom our Jobs page:
How to Get a Professional Look With Color
What makes a design look coordinated, planned and professional? The answer is: ‘color’. Not every project needs bland corporate blue to look professional. Planning color means creating a framework that describes which colors to use and how to use them. Color is the slipperiest design element. But color is vital to content. In this article we’ll review some techniques to achieve beautiful color palletes for your web designs. The best way to make a website look unplanned is to choose its colors at random. Even when visitors skim a website’s home page for the first time, the colors influence their attitude towards the content. Color affects how people interpret what they see as much as typography. Finding the right colors isn’t easy, but the process can be systematic. Good design strategy involves a color scheme (i.e. a range of colors selected to communicate a mood or message) and an arrangement of that scheme. Let’s say you’ve been asked to design a professional website. Go Grayscale Tips
Wireframes and Tools to Create Them
Wireframing, or prototyping, while designing, costs almost nothing, but can give back so much. While many designers start with a sketch in their mind and then just put it into Photoshop or even code it right away, some others start on paper. Yes, paper, that (most of the time) white thing we write on with our hands. Sounds very 2000-ish, but even today the best designers out there use this technique to their advantage. What wireframing basically means is putting your design ideas on paper – for each of the multiple pages of a website. Keep in mind that these common elements are a must for any design. General – the wireframe In order to be able to use a wireframe, you need to know how it actually works. Image by Zach Hoeken. Wireframing or Photoshop design? The alternative to paper web prototyping is creating the visual design in Photoshop first. You can call a wireframe a sketch if you want to. Image by Denkbeelhouwer. The Prototyping Stage Tools for web prototyping 1. iPlotz 2. 3. 5.
The 20 best wireframing tools | Wireframes
Wireframe tools make the process of knowing how to create an app or website fundamentally easier, by visually stripping the product down and enabling all involved to focus purely on functions and user interactivity. Clients need to understand how your proposed app or website will work. But simply explaining to them verbally or in writing leaves the vast majority of functions down to their imagination – which isn't helpful for you or your client, and leaves a lot of room of error. Get 15% off Creative Cloud with our exclusive offer There are more wireframe tools on the market than ever, each offering varying levels of functionality. Taking advantage of trial downloads or free software and finding the one that fits in with the way you work is the best way of finding out which one is right for you. Web-based Justinmind includes a library of UI elements, from buttons and forms to generics shapes and a range of widgets for iOS, SAP and Android. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10.
CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS
Vertically Center Multi-Lined Text
If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap. A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to multiple lines. View Demo Download Files The HTML is nothing fancy. <div class="area"><div class="bubble"><p>To look best, text should really be centered inside this bubble both vertically and horizontally. The "bubble" we'll set to display: table;, which really doesn't do much by itself, but then we can set the <p> element inside to be a table-cell, which allows us to use the vertical-align property on it. Does the trick beautifully I think. What about IE <= 7 ?! IE 8 is supporting CSS tables, but IE 7 and below do not. ... could be worse. First wrap the inside <p> in a new <div> and then: Share On
Designers Know Your Code: Web Design Tutorials
Oct 03 2011 As almost any web designer worth their salt, and a large percentage of web developers will tell you, to be fully considered a web designer you have to have some background in code. Not to the depth that full on developers must, but it really is unfair to the rest of those working on a website with us if we do not have some knowledge in a handful of key areas. Which is where these web design tutorials come in. In this post we have gathered a handful of useful tutorials from these various areas of code that designers should have their hands in. CSS Tutorials 30 CSS Best Practices for Beginners – CSS is a language that is used by nearly every developer at some point. 6 Ways To Improve Your Web Typography – Typography on the web is anything but simple, and for many, it is a troubling mystery. 3 Easy and Fast CSS Techniques for Faux Image Cropping – This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. (rb)
Free Wireframing Kits, UI Design Kits, PDFs and Resources
Advertisement To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details. In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. Free Mobile GUI PSD Android GUI PSD1 This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. RIM Blackberry PSD2 A complete PSD file with layer styles, this has 135 layers of Photoshop goodness. Android Sketch Stencil Version 1.03 A Sketch-style Android OmniGraffle template. iPhone 4 GUI PSD (Retina Display)5GUI PSD kit for creatives who design for the retina display (640×960).
