Text Shadows를 쉽게 만들어 보자 - Trendy CSS, mixfont

관련 자료

 

 

Mixfont | A modern font generator

 

www.mixfont.com

https://www.mixfont.com/generate

 

Mixfont | A modern font generator

 

www.mixfont.com

( https://www.mixfont.com/shadows )

 

 

 

글자 폰트와 그림자를 통해 세련된 페이지를 만들 수 있는 라이브러리이다. 

아래 그림들은 이 라이브러리를 이용해 만든 글자를 캡처해 보았다.

 

 

 

그리고 하이라이트 마지막으로 이 사이트에서 Generate(html, css, text)된 페이지를 만들어 주기 때문에 생각 없이 웹 페이지를 만들때 참고하여 빠르게 만들어 볼 수 있게 지원하고 있다.

https://www.mixfont.com/generate

 

Mixfont | A modern font generator

 

www.mixfont.com

위 링크를 타고 들어가면 바로 자동 생성된 페이지로 변환이 된다.

 

[그림] 자동 생성된 페이지 화면

 

저작자표시 변경금지

'기타' 카테고리의 다른 글

StaticGen - 정적 HTML 생성툴 모음 사이트 소개  (0) 2019.12.19
electron-vue를 이용한 데스크탑앱 만들기  (0) 2019.05.03
색상 찾기 - 어울리는 색상을 찾아보자  (0) 2019.04.20
RWDB - Responsive Web Design dB Web awards  (0) 2019.04.18
디자이너 여기 다 있음 - load.kr  (0) 2016.06.22

CSS3 Transition example site


참조 URL
  1. http://www.creativesandbox.com/guidebook
  2. http://2012.beercamp.com/



CSS3의 Transition 기능을 이용해서 만든 사이트다.












저작자표시 동일조건

'기타' 카테고리의 다른 글

폰앱의 멀티 플랫폼 개발 도구 - Adobe Air3, Titanium, PhoneGAP, Nomad  (0) 2013.08.06
마인드 맵으로 암기의 달인이 되어 볼까~ - Youtube  (0) 2013.08.05
아름다운 야경 동영상  (0) 2013.07.05
[PowerShell] Get-AdUser, Active Directory Query, LDAP  (0) 2013.06.24
[Application Framework] Framework Mindmap #1  (2) 2013.06.15

CSS Transition를 이용한 버튼 애니메이션 효과


참조 URL
  1. http://html5snippets.com/snippets/59-introduction-to-css3-animations
  2. http://www.the-art-of-web.com/css/css-animation/#.Ufm1yJLxqlg
  3. http://www.creativebloq.com/css3/animation-with-css3-712437
  4. http://lab.tylergaw.com/themanfromhollywood/
  5. http://cssdeck.com/labs/google-doodle-in-css-follow-up
  6. http://www.clicktorelease.com/code/css3dclouds/
  7. http://tympanus.net/Tutorials/AnimatedButtons/index2.html
  8. http://tympanus.net/Tutorials/OriginalHoverEffects/index.html
  9. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-transitions-and-transforms-from-scratch/
  10. http://2012.beercamp.com/
  11. http://www.creativesandbox.com/guidebook


 HTML5가 나오면서 CSS로 애니메이션을 할 수 있는 방법이 나오게 되었다. 이전에는 Javascript로 구현해야 하였기에 많은 CPU와 복잡한 로직으로 되어야 했지만 CSS의 Taansition을 통해 그나마 쉽게 컨트롤 할 수 있게 되었다. 이와 관련해서 여러가지 예제와 샘플들이 있지만 아래와 같이 버튼에 대해서 효과를 주는 간단한 CSS를 소개해 주고자 한다.



CSS의 Transition을 지원하는 브라우저에서만 확인할 수 있다. 예) 최신 Chrome browser
박스를 마우스 오버 시키면 박스가 빠르게 회전을 하고
마우스 Leave 시키면 반대편으로 빠르게 회전하여 돌아오는 CSS Transition 데모다.
  • A
  • B








위 표현은 아래 코드를 통해서 나타낸다.




[코드] HTML의 Style 선언




[코드] HTML의 Tag 선언



 HTML 5의 CSS3 Transition에 가장 잘 표현한 사이트가 있으니 여기에서 확인해 보고 경이로움을 같이 공유하였으면 합니다.

http://www.clicktorelease.com/code/css3dclouds/



그리고 어린이 도서와 같은 팝업북 같은 느낌의 사이트

http://www.creativesandbox.com/guidebook - 강추






저작자표시 동일조건

'HTML5' 카테고리의 다른 글

인터랙티브로 말하는 웹과 웹앱 개발  (0) 2013.09.21
HTML5 Animation Tool - HTML5 애니메이션 만들기 - Adobe Edge  (0) 2013.09.01
[HTML5] Cross Document messaging 통신 - 크로스 사이트 통신 하기 IFrame ( window.postMessage )  (0) 2013.08.14
ES5 & ES6 ( ECMAScript 5 & ECMAScript 6) Compact table  (0) 2013.07.17
[CORS] Cross-Origin Resource Sharing  (0) 2013.04.01

+ Recent posts

티스토리툴바