Antes que nada me gustaría que revisen mis aportes, y alguien me explique porque mi "Karma" no sube... Bueno igual si quieren sino y nada... ahora si:
Mañana es el mi ultimo día de trabajo en una empresa dedicada a sistemas, y por mi parte me toco trabajar en maquetacion HTML y css, asi que les traigo algo que me sirvió mucho o me llamo la atención son:
trucos para CSS
NOTA: en la demostracion pueden cambiar por valores dar click a RUN y ver como funciona.
me preguntaran si tanto se porque mierda este post se ve tan mal?, y porque me vale!... lo que quiero es compartirles esto. Seguro les sirve:
Cambiar el color de la selección de texto
Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:
[color=#000000][color=#000000]
[align=left]
[size=10]
[font=Lucida Sans]
/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }
[/font]
[/size]
[/align]
[/color][/color]
DEMOSTRACION
Letra capital
Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:
[align=left]
[size=10]
[font=Lucida Sans]
p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Enlaces que gradualmente se desvanecen
Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:
[align=left]
[size=10]
[font=Lucida Sans]
h2 {
font-size:24px;
font-weight:bold;
color: #262626;
opacity: 1.0;
-webkit-transition: opacity 0.4s linear;
}
h2 a {
color: #262626;
}
h2:hover {
opacity: 0.7;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Rotar una imagen
Este Código CSS te permite rotar una imagen los grados que gustes:
[align=left]
[size=10]
[font=Lucida Sans]
img {
transform:
rotate(45deg)
scale(-1, 1);
/* para firefox, safari, chrome, etc. */
-webkit-transform:
rotate(45deg)
scale(-1, 1);
-moz-transform:
rotate(45deg)
scale(-1, 1);
/* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
/* opera */
-o-transform:
rotate(45deg)
scale(-1, 1);
}
[/font]
[/size]
[/align]
DEMOSTRACION
Mover 1px el enlace al hacer clic
Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:
[align=left]
[size=10]
[font=Lucida Sans]
a:active {
position: relative;
top: 1px;
}
[/font]
[/size]
[/align]
DEMOSTRACION
CSS3 Media Queries
Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc):
[align=left]
[size=10]
[font=Lucida Sans]
/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}
[/font]
[/size]
[/align]
DEMOSTRACION
Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM
Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:
[align=left]
[size=10]
[font=Lucida Sans]
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
[/font]
[/size]
[/align]
DEMOSTRACION
Hacer que el cursor se vuelva un apuntador de enlace
Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en estos elementos solo debes poner el siguiente código:
[align=left]
[size=10]
[font=Lucida Sans]
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Quitar la linea de color que rodea los elementos input
Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes poner el siguiente código CSS:
[align=left]
[size=10]
[font=Lucida Sans]
input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Crear un efecto giratorio y de zoom en las imágenes
Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:
[align=left]
[size=10]
[font=Lucida Sans]
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
a.advert { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;
/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Hacks de CSS dependiendo del navegador
Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen algunos hacks para hacer código CSS dependiendo de cada navegador:
[align=left]
[size=10]
[font=Lucida Sans]
/***** Hacks de Selectores CSS ******/
/* IE6 y anteriores */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Todo menos IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Solo Firefox. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Hacks de Atributos ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Todo menos IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }
/* IE7, IE8 */
#veinte { color/***/: blue9; }
/* IE6, IE7 -- actúa como !important */
#veintesiete { color: blue !ie; }
[/font]
[/size]
[/align]
DEMOSTRACION
Animar una lista de enlaces
Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:
[align=left]
[size=10]
[font=Lucida Sans]
#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}
#animateList li a:hover {
padding-left: 10px;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Transparencia / Opacidad en todos los navegadores
Con este código podrás poner transparencia a elementos de tu diseño y que funciones en todos los navegadores
[align=left]
[size=10]
[font=Lucida Sans]
div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;
/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
[/font]
[/size]
[/align]
DEMOSTRACION
Estilo para enlaces externos
Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un icono al lado del enlace:
[align=left]
[size=10]
[font=Lucida Sans]
a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Estilo del enlace dependiendo de una palabra predefinida
Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL del enlace:
[align=left]
[size=10]
[font=Lucida Sans]
a[href*="trazos"] {
color: #39486c;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Estilo del enlace dependiendo de extensión del archivo enlazado
Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG, etc:
[align=left]
[size=10]
[font=Lucida Sans]
a[href$=".jpg"] {
color: red;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Utilizar fuentes de Google
Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:
Debes agregar el código que te genera la página de Webfonts entre las etiquetas <head> y </head>:
[align=left]
[size=10]
[font=Lucida Sans]
<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>
[/font]
[/size]
[/align]
y luego este en el archivo de tus estilos CSS:
[align=left]
[size=10]
[font=Lucida Sans]
h1 {
font-family: 'Ubuntu', sans-serif;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Hacer texto con bajo relieve
Con este código CSS haces que el texto se vea con un efecto de bajo relieve:
[align=left]
[size=10]
[font=Lucida Sans]
body {
background: #222222;
color: #131313;
font-size: 100px;
}
p {
text-align: center;
text-transform: uppercase;
text-shadow: #2d2f2d 2px 2px 4px;
}
[/font]
[/size]
[/align]
DEMOSTRACION
Tabs animados solo con CSS
Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.
Solo debes poner esto en donde quieras que aparezcan los tabs:
[align=left]
[size=10]
[font=Lucida Sans]
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab 1</label>
<div class="content">
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab 2</label>
<div class="content">
<p>Aquí va algún contenido para el tab 2</p>
<img src="http://lorempixum.com/200/100/technics/">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab 3</label>
<div class="content">
<p>Aquí va algún contenido para el tab 3</p>
<img src="http://lorempixum.com/200/100/nightlife/">
</div>
</div>
</div>
[/font]
[/size]
[/align]
y luego poner esto en el archivo de estilos CSS:
[color=#000000][color=#000000]
[align=left]
[size=10]
[font=Lucida Sans]
.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
[/font]
[/size]
[/align]
[/color][/color]
DEMOSTRACION
QUE CARAMBAS PASA CON EL "code"... me muestra caritas.... ya valio!! bueno copien y peguen... si no les funciona escriban, que suelo estar conectado, y les ayudo, sino en algunos funcionan la demostracion en otros no! asi que nada!! me estoy canzando de esto.... nos vemos la proxima! si les interesa mi anterior post fue:
nos vemos
COMENTEN
--------agregado despues de ver lo que el code genero------
encima no puedo poner codigo con @ porque menciono a cualquier usuario, como por ejemplo: en el codigo css quiero poner el codigo "donagus83" sin que mencione a nadie seria:
.sinmencionar {
@donagus83 -radius: 3px;
display: none
}
listo solo es un codigo...
disculpas a los mencionados sin querer
