Today we have a bit of inspiration for you, we have selected 35
marvellous light and white website designs. They are made from creative
people throught the World. Some websites made by Poles, some by
Russians, some by Brazilians, some by Americans and others. Enjoy the
eye-catching designs and feel free to leave your comments and mention
your favorites.
1. ArtDesignStock – Art, Design and Stock Portfolio of Levi Szekeres (Romania)
2. Epsdesign – creative and ecological projects of interior design (Italy)
3. Cappen – Digital Agency´s new website. All made using html5 with some nice transitions.(Brasil)
4. designzoom – web design solutions for budget people (Bangalore and Chennai India)
5. Elegant Seagulls is a creative design agency, MI specializing in website design (Marquette)
6. 80-20 Studio conceptualize, research, design, develop and deploy solutions that set new standards in user experience
20. MIR is a full-circle creative, design and post production company based in Russia.21. Camp6 provides a range of services from bookkeeping & accounting to website design and development.
Recently, I`ve decided to make cheat sheet dedicated to simple shapes
that can be made only by means of CSS3. I`ve used only instant
description. Since I`ve included majority of simple shapes like squares,
circles, triangles, ovals etc, you can easile combine some of these in
order to make complicated shape using :before or :after content-related
pseudo “elements”.
Since I have a feeling I’ll be using this quite a bit in the future, I
wanted to build on Cloud Four’s work and find a way to alleviate the
following issues:
Extra HTTP requests
Not iPad-specific
Lack of reusability
So, without further ado, here’s my proposed revision to the iPad orientation CSS:
<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}
<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>
As you can see, I’ve also changed the markup in a predictable
way. An explanation of the changes and the reasoning behind them can be
found below.
A quick and simple service for getting pictures of kittens for use as
placeholders in your designs or code. Just put your image size (width
& height) after our URL and you’ll get a placeholder.
Follow the placekitten.com url with your desired dimensions. For
example, if I needed a 450 x 300 placeholder image, I’d set the source attribute of an image tag to: http://placekitten.com/450/300.
Note that, with this service, you set your dimensions more traditionally, rather than separating the widths and heights into segments.
Placehold.it is a bit different in that, rather than using photos
for placeholders, it instead uses more traditional solid color images,
which might be more appealing to some designers.
Add some Sheen to your designs and prototypes with Charlie Sheen
placeholder pictures. Simply change the width and height in the URL to
get your custom placeholder.
Get placeholders related to the site you are developing, by pulling images from flickr based on tags.
Usage
FlickrHolder is helpful in that, in addition to using Flickr photos
as the placeholders, it also allows you to choose a desired tag as the
third segment. You can even choose to display photos in black and white.
DummyImage is particularly nice, when compared to some of its
competitors, in that it offers a great deal of flexibility. Let’s take a
look at some of the available options.
A clean and simple way to help align your layouts. No complex grid frameworks necessary.
Certainly, Griddle.it is unique compared to its peers because its
focus is on creating grid images, which can then be applied to the
background of your web design during production. View a live demo here.
Usage
Applying a background grid requires the following format: http://griddle.it/[total width]-[number of columns]-[gutter size].
So
you have a killer idea for an iPhone app, but when you describe it to
people they just don’t get it. Maybe you have a client that is a visual
thinker and needs you to draw it out for him. That’s when wireframes,
mockups and stencils can be your saving grace.
There are many different types of tools
available to developers, from low-tech stencil kits to high-tech
collaborative software. So I’ve rounded up a few of the more popular
ones people are using specifically for iPhone development. It’s far from
being the definitive list, but it’s definitely a good place to start.
Low Tech Solutions
Notepod
Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages
of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space
(the iPhone screen), the back is a 6mm grid.
The iPhone ui stencil kit is a stainless steel, laser cut stencil kit
for drawing quick mock-ups and wireframes for iPhone apps. It also comes
with a Zebra mechanical pencil.
The App Sketchbook has 50 Double-sided, perforated pages each with 3
actual sized iPhone templates. Each page also has has 20px ruler
markings and a ruled section for notes.
Graffletopia’s stencil kit for Omnigraffle.
It is for quick sketching of iPhone ideas. Use the outline for
printouts so you can hand sketch as well. The symbols are meant as a
check list for included features in your app development.
This is a plug-in to browser Mozilla FireFox for prototyping interface
of iPhone applications for creating an iPhone mock-up. Currently Alpha –
not compatible with FF 3.55.
Pencil is a free and opensource tool for making diagrams and GUI
prototyping. Pencil runs on the Mozilla Gecko engine, turning the
Firefox browser into a sketching tool with just a 400-kilobyte
installation package.
This plug-in combines Fireworks with some jQuery and PHP to give you a
prototype you can not only view, but interact with, directly on your
iPhone, just as if it’s a live app.
Liveview is an iPhone app that consists of two parts: the ScreenCaster
and the Application itself. ScreenCaster launches a simple iPhone skin
on your Mac. From the same network, launch the LiveView app in your
iPhone. Whatever the ScreenCaster is highlighting is now seen in the
LiveView App. It also interprets touches as mouse clicks, turning it
into a two way interactive prototype.
Mockingbird is a web based mockup/wireframe tool built using the
Cappucino framework, so there’s no flash to wrestle with. While you
can’t actually design your mockups from an iPhone (who’d want to?), the
tool does have some very handy features. You can drag elements onto the
screen, create multiple pages, link to other pages and share directly
from the web.
Pidoco is a web-based tool that lets you create clickable wireframes
via drag & drop ui and then collaborate with remote users on each
project. The tool also includes iPhone stencils.
iPhone mockup is a web based tool that is currently in Alpha release
only. You can design your mockup as a hand sketch or illustration, and
mockups can contain user-uploaded images and user-entered text. Your
mockups will be accessible via url so they are unsecured.
The developer makes this perfectly clear and warns that he could
discontinue hosting mockups at anytime, thereby deleting any work. That
makes this a handy tool for quick and dirty mockups you want to print or
share with someone on the fly, but not for much more.
Protoshare is a collaborative, web-based prototyping tool that helps
teams visualize requirements for interactive projects and work together
in real-time. It has an iPhone component that can be seen here.
With iPlotz you can create clickable, navigable wireframes to create
the experience of a real website or software application. You can also
invite others to comment on the designs, and once ready, you can then
manage the tasks for developers and designers to build the project.
CogTool is a general purpose UI prototyping tool simply using a
storyboard of your design idea with sketches, images or on a canvas.
Demonstrate tasks on that storyboard, then press a button to produce a
valid cognitive model predicting how long it will take a skilled user to
complete those tasks.
Balsamiq mockups is desktop software that is designed to help teams or
clients collaborate on wireframes and mockups. There are iPhone specific
controls included.
OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.
iRise for iPhones gives developers a way to quickly prototype the look,
feel and behavior of Apple iPhone applications through pre-defined
visualization widgets and templates that can be quickly assembled into a
high definition mobile applications.
브라우저별 CSS 속성 브라우저마다 적용되는 스타일이 다르므로 브라우저별로 지원하는 스타일을 맞게 설정해주어야 한다. 스타일의 속성 앞에 브라우저 구분 이름을 입력해주면 해당 브라우저 속성만이 실행한다.
접두사
설명
-webkit-
웹킷 방식 브라우저(사파리,크롬)
-moz-
게코 방식 브라우저(모질라, 파이어폭스)
-o-
오페라 브라우저
-ms-
마이크로소프트 인터넷익스플로러
구조적 선택 기능 가상 클래스에 not을 입력하면 선택한 태그 이외의 태그들을 선택할 수 있고 nth-child(n)를 입력하여 여러 개의 항목 중 특정 항목에만 스타일을 지정할 수 있다. n에 even을 입력하면 짝수 번째, odd를 입력하면 홀수 번째 항목에 스타일을 적용할 수 있다.
*:not(태그)
태그를 제외한 모든 내용을 선택
nth-child(n)
항목 중 n번째 항목을 선택
nth-last-child(n)
항목 중 끝에서부터 항목을 선택
nth-of-type(n)
유형이 같은 항목을 선택
nth-last-of-type(n)
항목 중 끝에서부터 유형이 같은 항목을 선택
ex) <style> /* * 링크가 설정된 요소를 제외한 모든 태그에 스타일이 적용된다. */ *:not(a){ font-weight:bold; color:red; } /* * 리스트 중 홀수 번째 목록은 글자색이 빨간색으로 표시되고 * 두 번째 목록은 파란색으로 표시된다. */ li:nth-child(odd){ color:red; } li:nth-child(2){ color:blue; } </style>
배경에 그라데이션 만들기 배경에 선형 또는 원형의 그라데이션을 설정할 수 있다. 브라우저마다 사용하는 코드방식이 다르므로 브라우저별로 설정해주어야 한다. background-webkit-gradient( 유형, 시작위치, from(색상), to(색상) ); * 유형 : 선형(linear) 또는 원형(radial)을 지정한다. * 시작 위치, 끝 위치 : x와 y 좌표를 백분율로 입력하거나 left, bottom 처럼 영문으로 그라데이션의 시작과 끝 위치를 설정한다. * from(색상) : 그라데이션 시작 색상을 설정한다. * to(색상) : 그라데이션 끝 색상을 설정한다. ex) <style> /* * 높이 150 픽셀 크기에 왼쪽에서 오른쪽으로 검정색에서 흰색으로 그라데이션이 채워진다. */ div{ height:150px; border:1px solid #000000; background: -webkit-gradient(linear, left center, right center, from(#000000), to(#ffffff)); } </style>
다단표시 column 속성을 사용하면 다단을 손쉽게 나눌 수 있다. ex)<style> /* * 2개의 단으로 나누고 단 간격은 10픽셀, 구분선은 검정색 실전으로 표시된다. */ div{ border:1px solid #000000; -webkit-column-count:2; -webkit-column-gap:10px; -webkit-column-rule:1px solid #000000; } </style>
21. Camp6 provides a range of services from bookkeeping & accounting to website design and development.
(0) 
(0)
So
you have a killer idea for an iPhone app, but when you describe it to
people they just don’t get it. Maybe you have a client that is a visual
thinker and needs you to draw it out for him. That’s when wireframes,
mockups and stencils can be your saving grace.
