WOW.js is another great library for revealing animations on scroll with some easy to customize features. Made by Matt Aussaguel.
Friday, February 14, 2014
Tutorial Setup WOW.js
WOW.js is another great library for revealing animations on scroll with some easy to customize features. Made by Matt Aussaguel.
Thursday, February 06, 2014
Inspirational Website: soppo
The website of Soppo, an interactive production studio, is filled with creativity and fluid effects. Our pick this week!
screenshot
Saturday, January 18, 2014
Google Glass experiment Website
FIND OUT HOW TECHNOLOGY CAN CHANGE YOUR WAY OF DOING SPORTS. YES WE DID IT!
It takes a long time to load, but it's definitely worth the wait. Eleks' Google Glass experiment website is our pick this week.
Thursday, January 16, 2014
48 Free brilliant vector icon set
Robin Kylander created this brilliant vector icon set with 48 icons for free.
Another set of icons (and for free).
Simply get the attachment for vector.
Download Flat Round Icons Set
If you need some pixel-perfect, round and flat icons for your next
project, you'll definitely find RoundIcons interesting. You can download
a set of 60 icon for a tweet or a like.
Free flat round icons set – 60 icons
Get a taste and check out these free icons from our premium bundle
Thursday, December 12, 2013
Tutorial Progress Button Styles
Tutorial Progress Button Styles is a set of flat and 3D progress button styles
where the button itself serves as a progress indicator. 3D styles are
used for showing the progress indication on one side of the button while
rotating the button in perspective.
Today we’d like to share some progress button styles with you. You surely know “Ladda”
by Hakim El Hattab, a UI concept that indicates progress directly on
the button that invokes a loading action. Some of the buttons have a
built-in progress bar and today we’d like to explore that idea with some
creative progress button styles. Using perspective will allow us to
create some fun 3D effects besides the flat “filling” styles. For a
complete solution, please take a better look at Ladda.
Please note that we’ll be using transitions on pseudo-elements which are still not supported in some browsers (e.g. Safari and Mobile Safari).
Also note that we need
With the script that we’ve created for showing the button styles, we take a simple button markup
Please note that we’ll be using transitions on pseudo-elements which are still not supported in some browsers (e.g. Safari and Mobile Safari).
Also note that we need
transform-style: preserve-3d support for the 3D styles, which neither IE10 nor IE11 support.With the script that we’ve created for showing the button styles, we take a simple button markup
1
| <button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submi |
and transform it into the following structure:
If we don’t set the
We also indicate if we have a style that needs horizontal or vertical
progress bar filling. This will be used in our CSS to specify the
regarding styles.
The following styles are the general and common styles for all buttons (note that perspective styles are only needed for the buttons with 3D transforms):
We are using the pseudo-elements ::before and ::after for the success
or error icons which we fade in once loading is finished. The
Note that for the 3D examples, we’ll use the button as a “shell” that will serve to add the perspective value. The content span will contain the button styles like the background color and the padding, and everything will be wrapped into a
An example of an individual button style is the following:
The button will have one of the three states (or none): state-loading, state-success and state-error.
For browsers that don’t support necessary properties, we’ll provide the default fallback of the first style (fill horizontal).
Icons are by IcoMoon and the icon font was created with the IcoMoon app.
source:http://tympanus.net/codrops/2013/12/12/progress-button-styles/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29
1
2
3
4
5
6
7
8
| <button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal> <span class="progress-wrap"> <span class="content">Submit</span> <span class="progress"> <span class="progress-inner"></span> </span> </span></button> |
data-perspective attribute, then we’ll make this structure:
1
2
3
4
5
6
| <button class="progress-button" data-style="fill" data-horizontal> <span class="content">Submit</span> <span class="progress"> <span class="progress-inner"></span> </span></button> |
The following styles are the general and common styles for all buttons (note that perspective styles are only needed for the buttons with 3D transforms):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| *, *:after, *::before { box-sizing: border-box; }@font-face { font-weight: normal; font-style: normal; font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');}.progress-button { position: relative; display: inline-block; padding: 0 60px; outline: none; border: none; background: #1d9650; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 1em; line-height: 4;}.progress-button[disabled],.progress-button[disabled].state-loading { cursor: default;}.progress-button .content { position: relative; display: block;}.progress-button .content::before,.progress-button .content::after { position: absolute; right: 20px; color: #0e7138; font-family: "icomoon"; opacity: 0; transition: opacity 0.3s 0.3s;}.progress-button .content::before { content: "\e600"; /* Checkmark for success */}.progress-button .content::after { content: "\e601"; /* Cross for error */}.progress-button.state-success .content::before,.progress-button.state-error .content::after { opacity: 1;}.notransition { transition: none !important;}.progress-button .progress { background: #148544;}.progress-button .progress-inner { position: absolute; left: 0; background: #0e7138;}.progress-button[data-horizontal] .progress-inner { top: 0; width: 0; height: 100%; transition: width 0.3s, opacity 0.3s;}.progress-button[data-vertical] .progress-inner { bottom: 0; width: 100%; height: 0; transition: height 0.3s, opacity 0.3s;}/* Necessary styles for buttons with 3D transforms */.progress-button[data-perspective] { position: relative; display: inline-block; padding: 0; background: transparent; perspective: 900px;}.progress-button[data-perspective] .content { padding: 0 60px; background: #1d9650;}.progress-button[data-perspective] .progress-wrap { display: block; transition: transform 0.2s; transform-style: preserve-3d;}.progress-button[data-perspective] .content,.progress-button[data-perspective] .progress { outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */} |
span with the class progress is used as the main wrapper for the progress bar itself which is the span with class progress-inner. Sometimes we use the progress span with a background color, while other times we will just style the child span. We’ll also provide some general styles for the vertical and horizontal case.Note that for the 3D examples, we’ll use the button as a “shell” that will serve to add the perspective value. The content span will contain the button styles like the background color and the padding, and everything will be wrapped into a
span with the class progress-wrap which will be the element that we transform.An example of an individual button style is the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /* Rotate bottom 3d *//* ====================== */.progress-button[data-style="rotate-angle-bottom"] .progress { position: absolute; top: 100%; left: 0; width: 100%; height: 20px; box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */ transform: rotateX(-90deg); transform-origin: 50% 0%;}.progress-button[data-style="rotate-angle-bottom"].state-loading .progress-wrap { transform: rotateX(45deg);} |
For browsers that don’t support necessary properties, we’ll provide the default fallback of the first style (fill horizontal).
Icons are by IcoMoon and the icon font was created with the IcoMoon app.
source:http://tympanus.net/codrops/2013/12/12/progress-button-styles/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29
Wednesday, December 04, 2013
Smallicons Icon Set (54 Icons, SVG, PNG, PSD)
A fantastic freebie over at Smashing Magazine: Smallicons, a set of 54 SVG, PNG, PSD flat icons is several formats, created and designed by Nick Frost and Greg Lapin.
Tuesday, December 03, 2013
Tutorial Creating Textured Tex
In this article we'll explore all the
current tutorial creating image or texture filled text and show
you how to apply them.
The CSS
Different effects, such as giving an element transparent borders, can be created using this property, and it is pretty well supported in all modern browsers.
The
The
For now, we’ll create a text with a background using the
For our demo (shown in the screenshot above), we have an element with a background and a headline inside it, and we want to clip its background to make it appear as if the background is only applied to the text inside it.
background-clip property determines an element’s background painting area,
which is the area within which the background is painted. By default,
the background extends all the way to the border of an element with a
default value of border-box, and it can take other values like padding-box and content-box, which are self-explanatory.Different effects, such as giving an element transparent borders, can be created using this property, and it is pretty well supported in all modern browsers.
The
background-clip property was extended in Webkit with a fourth value, text, which causes the background image to clip to foreground text (including decorations and shadows). Then, by giving the text a transparent color using the Webkit-only property -webkit-text-fill-color, the background image will show through the text, thus completing the clipping effect.The
text value of the background-clip property is, at the time of writing of this article, not part of any standard yet, so unfortunately it can only work in WebKit browsers, and a simple CSS fallback can be provided for other browsers, or a polyfill could be used to provide other fallbacks.For now, we’ll create a text with a background using the
-webkit-background-clip property, and provide a CSS-only fallback which will show the image underneath the text for non-WebKit browsers.For our demo (shown in the screenshot above), we have an element with a background and a headline inside it, and we want to clip its background to make it appear as if the background is only applied to the text inside it.
Subscribe to:
Posts (Atom)
RSS Feed
Twitter
Facebook
