Skip to content

Instantly share code, notes, and snippets.

.rotulo {
background: #000;
height: 80px;
position: relative;
border:1px solid grey;
color: white;
}
.rotulo span {
font-family: Arial, sans-serif;
font-size:50px;
@oloman
oloman / dabblet.css
Created May 9, 2012 22:35
Rotating Words with CSS Animations
/* Rotating Words with CSS Animations */
/* Codrops: http://goo.gl/utC04 */
@font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 700;
src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff') format('woff');
}
.rw-wrapper{
@oloman
oloman / dabblet.css
Created May 11, 2012 21:41
Presentando al equipo con CSS
/* Presentando al equipo con CSS */
.presentar a, .presentar img, .presentar a span {
border:0;
padding:0;
margin:0;
}
.presentar a {
position: relative;
display: block;
@oloman
oloman / dabblet.css
Created May 20, 2012 20:10
Semáforo CSS
/* Semáforo CSS */
ul.semaforo {
position: relative;
width: 60px;
margin: 40px auto;
padding: 0;
list-style-type: none;
}
ul.semaforo li {
@oloman
oloman / dabblet.css
Created May 20, 2012 20:20
Semáforo realista CSS
/* Semáforo realista CSS */
ul.semaforo {
float:left;
position: relative;
width: 100px;
margin: 0 50px;
padding: 15px;
list-style-type: none;
@oloman
oloman / dabblet.css
Created May 20, 2012 22:50
Otro semáforo CSS
/* Otro semáforo CSS */
.semaforo,
.semaforo:before,
.semaforo:after {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgrey;
@oloman
oloman / dabblet.css
Created May 28, 2012 23:22
Menú de círculos rotando CSS
/* Menú de círculos rotando CSS */
ul.circulos {
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px arial;
text-transform: uppercase;
@oloman
oloman / dabblet.css
Created May 30, 2012 17:23
Efecto hoja con esquina plegada
/* Efecto hoja con esquina plegada */
body {
padding: 20px;
background: #cccccc;
}
h1 {
text-align: center;
}
.hoja {
@oloman
oloman / dabblet.css
Created May 30, 2012 18:53
Menú de círculos expandible
/* Menú de círculos expandible */
ul.circulos {
position: relative;
width: 100%;
height: 120px;
margin: 20px auto;
text-align: center;
list-style-type: none;
@oloman
oloman / dabblet.css
Created June 5, 2012 19:19
Visor CSS con miniaturas
/* Visor CSS con miniaturas */
.contenedorvisor {
position: relative;
width: 800px;
height: 700px;
margin: 0 auto;
text-align:center;