Un botó amb colors degradats amb CSS3

Body

Ací un truquet per tenir botons, estil bootstrap, amb CSS3, on podem fer degradats entre dos colors i tenir un borde distint.

El botonet seria:

I afegiriem un exemple d'estil per als degratats de la següent manera:


.button{
border: solid 1px #da7c0c;
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#91dc5a), to(#32a1ca));
background: -moz-linear-gradient(top, #91dc5a, #32a1ca);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91dc5a', endColorstr='#32a1ca');
color: #fff;
padding: 7px 12px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float: right;
cursor: pointer;
}

.button:hover{
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#91dc5a), to(#32a1ca));
background: -moz-linear-gradient(top, #91dc5a, #32a1ca);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91dc5a', endColorstr='#32a1ca');
}

artícles
19

Uns apunts per a tenir activada la llibreria Animate.css

Body

El Codi del projecte el tenim a https://github.com/daneden/animate.css i la demo dels efectes la tenim ací. Si volem tindre-ho configurat al nostre projecte web, afegim al head les següents dos línies:

I també el següent codi javascript:

artícles
19

Deshabilitant la barreta superior de menú de Bootstrap

Body

Tinc el tema grayscale.css al Bootstrap, i la classe que mostra la barra inicial és .navbar, i quan baixem l'scroll i es fa una miqueta més menuda és .top-nav-collapse, concretament són:


@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.top-nav-collapse {
padding: 0;
background-color: #000;
}

artícles
19

Exemple de 3 caixes horitzontals i responsives

Body

Aquest és el codi HTML:


Vecinos

Visitantes

Gestiones

I aqeust és el codi CSS:


#container_portada_responsive {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 103%;
position: relatve;
left: -20px;
}

.box1, .box2, .box3 {
width: 32%;
height: 200px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
padding: 0;
margin: 0;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}

artícles
19

Alguns menuts canvis al Mantis per a fer-ho més minimalista i clar

Body

Ací m'apunte alguns canvis diversos que hem fet als CSS per a la façana de les estadístiques actuals, des del fitxer css/default.css i tocant:


table.width100 { width: 100%; border: solid 1px #dcdcdc; }

Ací alguns canvis CSS a la taula del login principal:


table.width50 { width: 50%; border: solid 1px #dcdcdc; }

artícles
19

Trencant les paraules dels títols de les notícies parsejant titulars Atom amb PHP

Body

Estic fent una webapp on agafe les notícies via PHP contra els titulars Atoms d'un Drupal, i per algun motiu els títols llargs no baixaven de línea i continuaven eixint-se del div. Havia provat word-break: break-word; però no es trencava de cap manera, i al final he vist a css-tricks.com aquest codi que sí m'ha funcionat:


#continguts {
padding: 0 20px 0 20px; `
-ms-word-break: break-all;

/* Breaks normal words wh_erever */
word-break: break-all;

/* Non standard for webkit */
word-break: break-word;

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

artícles
19
Subscribe to categoria-xhtmlcss