ozzyshool
Usuario (Ecuador)
Un dia vi estos vasos y me pregunte como caramba puedo hacerlo con algunas botellas que tengo, y que me queden asi o asi (bueno no tanto asi) antes: ADVERTENCIA: El consumo de alcohol para hacer estos vasos no es necesario, y ten cuidado con los vidrios, y el fuego. aqui las indicaciones: Elegir la botella: puede ser cualquier marca, te recomendaria que intentes primero con las que menos te gusten para que al final cuando seas un experto hagas de las que mas te gusten Atar una cuerda justo encima de donde deseas hacer el corte, sobre la etiqueta mayormente Deslizar el nudo o el lazo, y mojar en algun liquido combustible, recomendacion: Liquido de encendedores manten tus manos secas, si te manchas seca tus manos antes de iniciar el siguiente paso volver a colocar la cuerda, con la botella Vertical enciende el hilo y espera el Chasquido o el sonido de quiebre de la botella que se dara a los 10 segundo aproximado Vierte agua encima de donde estaba la cuerda girandola y sosteniendo la otra parte para que no caiga y se rompa y tengas que limpiar pedazos de peligrosos vidrios Con una lija y con mucho cuidado lija suavemente los filos hasta que estén suaves, recuerda darle mucho tiempo a esto porque sino el herido vas a ser tu mismo o algún familiar tuyo eso es todo en "art attack"
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: /* webkit, opera, IE9 */ ::selection { background:#555; color:#fff; } /* mozilla firefox */ ::-moz-selection { background:#555; color #fff; } 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: p:first-letter { display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; } 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: 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; } DEMOSTRACION Rotar una imagen Este Código CSS te permite rotar una imagen los grados que gustes: 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); } 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: a:active { position: relative; top: 1px; } DEMOSTRACION CSS3 Media Queries Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc): /* 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 */ } 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: body { font-size: 62.5%; /* font-size 1em = 10px */ } p { font-size: 1.2em; /* 1.2em = 12px */ } 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: a, input, input, label, select, button, .pointer { cursor: pointer; } 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: input:focus, textarea:focus, input:focus { outline: none; } 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: @-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; } 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: /***** 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; } 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: #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; } 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 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 */ } 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: a[href^="http"] { background: url(icono.png) no-repeat; padding-left: 10px; } 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: a[href*="trazos"] { color: #39486c; } 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: a[href$=".jpg"] { color: red; } 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>: <link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'> y luego este en el archivo de tus estilos CSS: h1 { font-family: 'Ubuntu', sans-serif; } DEMOSTRACION Hacer texto con bajo relieve Con este código CSS haces que el texto se vea con un efecto de bajo relieve: body { background: #222222; color: #131313; font-size: 100px; } p { text-align: center; text-transform: uppercase; text-shadow: #2d2f2d 2px 2px 4px; } 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: <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> y luego poner esto en el archivo de estilos CSS: .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 { 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; } :checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } :checked ~ label ~ .content { z-index: 1; } :checked ~ label ~ .content > * { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 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: 40 sitios OnLine Para Diseñadores Web (para guardar) 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