728x90

우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다.

웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다.

우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다.

오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 당신은 아마 단 한 번도 들어본 적 없을겁니다. 시작해볼까요.

어쩌면 당신에게 조금 익숙할 수 있는 단위로 시작해보죠. em은 현재의 font-size를 정의합니다. 일례로, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.

여기, div에 font-size를 1.2em으로 지정했습니다. 이 예제에서는 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px의 크기가 됩니다.

그런데 여기 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하면 어떤 일이 생길까요? 같은 CSS를 적용한 동일한 코드를 추가해보았습니다. 각각의 div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 됩니다.

이것은 어떤 경우엔 바람직하겠지만 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 하지요. 이런 경우 바로 rem 단위를 사용하면 됩니다. rem의 "r"은 바로 "root(최상위)"를 뜻합니다. 최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그입니다.

이전 예제에서 만든 복잡한 단계의 세 div는 모두 16.8px의 폰트 사이즈로 표현되었습니다.

rem은 폰트에서만 사용하진 않습니다. 예를 들어, 그리드 시스템이나 rem을 이용한 기본 폰트 사이즈 기반으로 만든 UI 스타일, 그리고 em을 이용해 특정 위치에 특별한 사이즈를 지정할 수도 있습니다. 보다 정확한 폰트 사이즈나 크기 조정을 가능하게 해줄 겁니다.

개념적으로 보면, 이 아이디어는 여러분의 콘텐츠 사이즈를 조절 할 수 있는 인터페이스 전략과 유사합니다. 그러나 모든 경우에 반드시 이런 방법을 따를 필요는 없습니다.

rem (root em) 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.

반응형 웹디자인 기술은 퍼센트 값에 상당히 의존하고 있습니다. 하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아니지요. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다. 만약 너비값과 높이값을 부모 요소의 너비값의 뷰포트에 맞게 사용할 수 있다면 어떨까요? 바로 vh와 vw 단위가 그런 의도에 맞는 단위라는 사실.

vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면1vw는 7.5px이 됩니다.

이 규칙에는 무궁무진한 사용방법이 있습니다. 예를 들면, 최대 높이값이나 그의 유사한 높이값의 슬라이드를 제작할때 아주 간단한 CSS만 입력하면 됩니다.

스크린의 너비값에 꽉 차는 헤드라인을 만든다고 상상해보세요. vw로 폰트 사이즈를 지정하면 쉽게 달성할 수 있습니다. 저 사이즈는 브라우저의 너비에 맞춰 변할 것입니다.

뷰포트 vw, vh 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vminvmax는 너비값과 높이값에따라 최대최소값을 지정할 수 있습니다. 예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다. 너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

어때요, 이 값들을 사용할 수 있나요?

언제나 스크린에 보여지는 요소를 만든다고 상상해보세요. 높이값과 너비값을 vmin을 사용해 100으로 지정합니다. 예를 들어 터치화면 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하면 됩니다.

만약 커버처럼 뷰포트 화면에 보여야 하는(모든 네 변이 스크린에 꽉 차 있는) 경우에는 같은 값을 vmax로 적용하면 됩니다.

알려드린 이 규칙들을 잘 조합해 활용하면 뷰포트에 맞는 매우 유연한 방식으로 사이즈 조절을 가능하게 할 수 있습니다.

뷰포트 단위: vmin, vmax의 호환성은 caniuse.com에서 확인할 수 있습니다.

ex와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다. em과 rem과 다른 점은 이 두 단위가 font-family에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.

ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 "고급 척도"로 정의됩니다. 흥미로운 의견은 에릭 마이어의 블로그에서 확인할 수 있습니다. 그러나 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다. 이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.

ex 단위의 정의는 "현재 폰트의 x-높이값 또는 em의 절반 값"이라고 할 수 있습니다.x-높이값은 소문자 x의 높이값이기도 합니다. 폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.

x-높이값; 소문자 x의 높이값 (자세한 것은 웹 타이포그래피의 해부학 링크를 참조하세요)

이 단위는 타이포그래픽에서 세밀한 조정을 할 때 많이 사용합니다. 예를 들어, 위첨자 태그인  sup 에게 position을 relative로 하고 bottom 값을 1ex라고 하면 위로 올릴 수 있습니다. 아래첨자 역시 비슷한 방법으로 아래로 내릴 수 있습니다. 브라우저는 위첨자와 아래첨자의 기본값을 vertical-align으로 정의하고 있지만, 보다 정교한 사용법을 알고 싶다면 아래와 같이 작성할 수 있습니다.

ex는 CSS1부터 있던 단위였고, ch 단위는 아직 찾을 수 없습니다. 에릭 마이어의 블로그에 있는 CSS 단위와 값에서 보다 많은 상세 정보를 볼 수 있습니다.

여러분의 막강한 CSS 도구들의 무한한 확장과 지속되는 개발환경에 계속 눈을 뜨고 지켜보세요 아마 특정 문제를 해결하기 위해 예상치 못한 해결방법으로 이 애매한 특정 단위들을 사용할 수도 있을 것입니다. 새로운 스펙들을 시간을 들여 읽어보세요. cssweekly와 같은 좋은 사이트에도 가입해서 지속적인 뉴스를 업데이트 받아보세요. 그리고 주간 업데이트에 가입하는 거 잊지 마세요. 무료 튜토리얼과 Tuts+의 웹디자인에서 나오는 다양한 자료들을 만날 수 있습니다.


출처 : http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573


Posted by 앗뜨거
,
728x90

 

 

 

 

 

출처 : http://circlash.tistory.com/610

Posted by 앗뜨거
,

[ CSS ] flexbox

HTML관련/CSS 2015. 12. 18. 11:10
728x90

 

 

 

 

 

출처 : http://ko.learnlayout.com/flexbox.html

 

Posted by 앗뜨거
,
728x90

Interactive SVG Workspace by Belle Epoque

Custom SVG elements can be combined together into an <svg> tag to make hard-coded illustrations for the web. This example from Belle Epoque is a fully interactive studio workspace.

Try clicking on the bicycle, the light switch, or even drawing the shades. Each interaction is managed through JavaScript but the illustration is 100% HTML/CSS code.


Sparkle Trail by Jack Rugile

Here’s an interested re-creation of a Dribbble shot made by Ramiro Galan. The trailing sparkle effect is notably harmonious with the original shot, but the coolest part is how everything was recreated using Canvas and JavaScript.


Icon Hover Glow by Chris Colouryum

One of the simplest things you can do with SVG is a toggle animation. This lightbulb icon fits the metaphor nicely with an on/off animation style. Also note how the JS code is only for cross-browser support – the animation itself relies solely on HTML and CSS3.


If you’re looking for a quick tutorial for getting started with inline SVG, you should have a look at this tutorial, and if you’re looking for some tools to help boost your SVG workflow, check out this round-up.


Rotating Petals by Bailh

Abstract design ideas tend to be the most interesting but the least useful in real-world situations. I still really dig this paper pattern built on Snap.svg. It offers a weird yet significant learning curve with SVG elements like ellipse andlinearGradient.


Simple Animated Icons by Simurai

CSS masking with SVGs can be very similar to Photoshop if you learn to do it right. This code snippet runs on custom SVG files with background gradients. The only downside is that CSS masks have poor browser support – but hopefully this will improve in time.


Elastic Material Design Sidebar by Nikolay Talanov

Mobile apps are renowned for their touch/tap effects that websites haven’t needed until touchscreen Internet. With SVGs you can create a touch/drag animation right in the browser, and this elastic menu plays the part nicely.


Vector Map Point by Adam Girton

Just a simple vector icon map of California with a beacon pinpointing home. California’s shape is actually built using SVG coordinates in HTML while the marker is pure CSS animation.


Responsive Graph by Andrew Weeks

Regular images can be made responsive but they often resize based on fixed dimensions. This graph can be stretchy, and even reposition data points to fit better on a small X/Y axis. Very cool use of SVGs for the responsive web.


CSS3 + SVG Animation by lionelB

A simple little airplane floating amongst the clouds. Not exactly useful for every web project but still quite inspiring to see what’s possible using only SVG & CSS.


Glossy Shine Effect by Vincent De Oliveira

This logo effect relies on a PNG image for the graphic but uses SVG/CSS masking for the shine. No JavaScript or external libraries needed – just pure CSS animation which is damn impressive.


Burger Menu Animation by Kyle Henwood

This is perhaps my favorite 3-bar hamburger icon animation effect. It uses two different SVGs with internal paths manipulated by JS and CSS classes.

Browser support is still a bit wonky but it could make a fine staple animation for future website interfaces.


SVG Typography Experiment by Chris Wright

A little experiment that shows how modern Webkit/IE browser engines can actually curve text along an SVG path. For all intents and purposes you’d be better off using a static image in any real project. But this is still very cool and worth considering for abstract typographic ideas.


Fullscreen Navigation by Anas Ashraf

Fullscreen dropdown menus can be found on many websites, often agencies or large creative studios. This particular code snippet uses a custom SVG for the 3-bar icon attached with a sweet animated effect.


Moving Mask by John Grishin

Masking is a tricky subject with spotty support but this example doesn’t use the typical CSS properties. Instead John uses JavaScript to manipulate paths based on which areas are touching within the diamond shape. Quite unique and fun to play with, too!


Canvas Circle Loader by Jack Rugile

Here’s a weird loader animation that resembles a polygraph mixed with a submarine radar. The content is housed inside a canvas element with JavaScript doing all the heavy lifting.


Tuts+ logoIf you’re looking to get started with CSS animation, Tuts+ have some handy courses that will get you going in no time: CSS Animation in the Real Worldand Scroll-Based CSS Animations.
They also have a great course for getting started with SVG for web design.


Depth of Field Effect by Vaughan Curd

Photographs can be manipulated in Photoshop but never dynamically for the web. This depth of field effect uses everything from SVG filters to JavaScript manipulation with an HTML <map> tag.


Dancing Robot by Val Head

It’s the simple things in life that bring joy and this dancing robot is full of jubilation. Each limb is built with a different SVG file which animates based on a CSS class.


Social Sharing Bar by Max West

3D browser effects are becoming more popular with a growing number of 3D JavaScript libraries. This social sharing bar uses an SVG with CSS3 perspective transforms. Quick, clean, and quite congenial.


Animated Map Directions by Max Boll

I’ve never seen this technique in a real website but it could be super helpful to delineate office locations or to create dynamic driving directions. The animated line is built using SVG coordinates which could be updated dynamically via JavaScript.


LCD Clock by Christian Hanvey

Believe it or not this entire clock was built using SVG elements. The polygon element is used since most of the shapes require 3 or more sides. Plus the time is surprisingly accurate based on JavaScript date/time methods.


CSS/JS/Canvas Night Scene by Jack Rugile

Parallax design goes hand-in-hand with SVGs and canvas elements. This minimalist scene was built using a few SVG icons surrounded by an outer canvas. It’s made to stretch and fit into enormous window sizes because the patterns are all vector-based.


SVG Letter Sprite by nahuelsotelo

Just another typographic experiment relying on SVGs for effects and scalability. The first letter of each word is contained inside an SVG sprite sheet. It requires very little code and runs surprisingly smooth in most browsers.


Shooting Plusses by Jack Rugile

Minimalist effects are common for testing simple features like these spouting plus signs. This requires only a single canvas element with ~100 lines of JavaScript. Everything from the plusses to the water hose animation is controlled via JavaScript.


UI Demo Animation by Lloyd Wheeler

Landing pages often rely on videos to describe how a product works. This SVG-based UI animation could be a wonderful alternative if you prefer minimalist design. The monitor icon is made with base64 SVG/XML code and animated with CSS3, but you could achieve the same effect with SVG files and JavaScript animation too.


SVG Weather Icons by Noah Blon

I can’t help but marvel at the beauty of this weather iconset. It’s based off Adam Whitcroft’s Climacons but each icon includes an extra CSS animation. The HTML is rather lengthy since each icon is hard-coded with XML/SVG but there’s still a lot to be learned by studying the techniques used in this snippet.


출처 : http://marketblog.envato.com/web-design/snippets-canvas-svg/


Posted by 앗뜨거
,
728x90

New Header Johan van Tongeren

A full header crafted with Open Sans & Squada One – definitely a unique touch. This header was designed for Johan van Tongeren’s new website. The logotype letters feature a striped shadow and the nav links expand in size through animated hover effects.


Star Wars Scrolling Text Scott Bram

George Lucas has unleashed an incredible force in the world of cinema with ripples leading into many other creative fields. This code snippet replicates the Star Wars intro text as it scrolls upwards at a slant away from the viewer.


Opening Type Bernardo

Perhaps the coolest aspect of this paper cutout effect is that it’s created with less than 100 lines of CSS. Each letter uses CSS3 transforms to skew the letter while rotating in 3-D along X/Y/Z axes.


Stylish Blockquote Stephen Greig

Here’s an interesting snippet that focuses on techniques found in traditional graphic design. Pseudo classes are used to manipulate the blockquote text and append CSS styles onto particular letters in the quote. Very cool style to spruce up a static webpage.


3D CSS Typography Noah Blon

With CSS3 transforms we can manipulate just about any text or page element with ease. Browser support is increasing and transforms have grown to allow for fully-encompassed animations like this 3D rotating block of text.


The Leonardo Blake Johnson

Quite an interesting logo concept for pure typographic font manipulation. The outer letters are cut off at 45° using CSS borders. In production this may work better as a PNG but for pushing CSS boundaries this is truly an impressive feat to behold.


’80s Typography David Parker

The ’80s are still alive and well in this CodePen snippet by David Parker. All 5 text effects come straight out of 1980s graphic design relying on nothing more than pure CSS3.


Curly Brace Divider Lauren Herda

Horizontal Rules have been apart of HTML for years – but CSS3 allows more fanciful effects to bring HR elements into the modern age of UI design. For example, this HR snippet is styled into a large curly brace using custom CSS3 background properties.


Exploring Type Robot

Just a few interesting drop shadow effects tied onto large lettering. Border divisions are added alongside letters and positioned at exactly 50% height.


Knockout Text Crisman Noble

This is one neat CSS style that forces a background image to show through letters on the page. I should note this effect will only work in Webkit browsers, so use it sparingly or in case test studies.


Diagonal-Dashed Shadow Lucas Bebber

Here’s another dynamic CSS text shadow using diagonal dashes for the pattern. They’re animated to jitter using CSS3 and they can even apply to borders located on top & bottom of the text.


CSS3 Logotype Nate Scott

Some real simple logo-esque typography with stencil borders. The text is styled as if to mimic a BBQ joint with big letters and similar drop shadows.


Creative Resume Sara Soueidan

This one-of-a-kind typographic resume relies on more traditional graphic design principles. Font color varies based on location to designate areas of the page to different skills. It’s a very cool idea that could be used on a real project with a bit of tweaking.


4 Text Shadow Effects Jorge Epuñan

We’ve seen a few text shadows in other pens but this snippet offers 4 unique CSS styles for creating text shadows. You’ll find a “flat” long shadow, 3D shadow, inset shadow & retro thin line shadow.


Geek Badge Rachel Nabors

At first this may not seem like much but it’s actually a ribbon comprised of nothing but HTML/CSS. The skewed text & rotated container were both created with dynamic CSS3 properties.


SCSS Tight Underline Mr. Pirrera

Typical CSS underlines will span the entirety of a word and maintain location based on line-height. This snippet generates a thin background image which falls behind letters, thus creating an underline that doesn’t cut through descenders.


Masked Text Shadow Daniel Riemer

Here’s an interesting CSS shadow that relies on masking to create the effect. CSS masks are not fully supported in most browsers, but they can be very powerful when used correctly.


Text Filling with Water xiaodong

When first finding this pen I thought it had to be using JavaScript. Believe it or not this animated water effect is created exclusively with CSS by replacing background images through CSS animation keyframes.


The Correct Pronounciation Daniel Burrows

Here we’ve got a very cool typeface stacked with an interesting drop shadow. But my favorite part of this snippet is the rotated section symbol(§) used as an aesthetic divider. It just goes to show you really can build anything with some creative ingenuity.


Skewed Typeface Kurt Emch

Comic book text is often bold, lengthy, and skewed in some direction. This code snippet uses the font Bangers in combination with CSS3 to create a proportionally skewed superhero-style text effect.


Circular Text Badge Jack Armley

This entire page was created using no images or any JavaScript. The rounded text, circular badge, and textured BGs were all created with pure CSS3.


Dotted Text Shadow Travis Benton

Another unique text shadow that uses dots like you’d find on a dot matrix printer. The dot pattern is generated through base64 code so there are no external images at all.


Colored 3D Effect Brian Guerrero

3D glasses can make digital pictures look weird and colorful in 3D. Well this CSS effect recreates the 3D look, sans glasses.

The shadows are combined into one property so we have 2 different shadows rendered onto the same text.


Text Perspective Nathaniel Watson

Here’s another interesting 3D effect reliant on pure CSS3 transforms. The perspective transform property is powerful when used under the right conditions.


Multi-Colored 3D Type Carlos Centeno

An interesting and vastly creative snippet: square block-case letters aligned together with uniquely colored text shadows. I have no idea how long it took to write the code for this text effect, but it looks magnificent.

Closing

Some of these snippets may prove useful in future projects while others may never be replicable in a professional setting. CodePen is just a fun place for developers to explore languages and see what’s possible in the world of frontend development. Feel free to mess around with any of these code snippets and see what else you can create.



출처 : http://marketblog.envato.com/web-design/css3-typography-code-snippets/?ref=webdesignernews.com


Posted by 앗뜨거
,