-
Par GloriaV le 17 Juillet 2015 à 11:09Enlace colorido Fuente
HTML
<a class="colorido" href="#">el enlace</a>
CSS
color: #FFF; padding=0 5px; background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); }
-
Par GloriaV le 17 Juillet 2015 à 11:12
Efecto para enlace
1. http://www.cristalab.com/curso-html/trucos-css/
2. http://www.w3.org/Selectores_avanzados_de_CSSCSS
/* links normales */
a:link {
text-decoration: none;
color: #00a ;
}
/* visitados */
a:visited {
color: #a00 ;
}
/* hover */
a:hover {
text-decoration: underline;
}
/* activos
a:active {
font-weight: bold;
}
-
Par GloriaV le 17 Juillet 2015 à 11:13
Efecto para link
CSS
a:link {
color: blue;
}
a:visited {
color: gray;
}
a:hover, a:focus {
text-decoration: none;
}
a:active {
font-weight: bold;
}
-
Par GloriaV le 17 Juillet 2015 à 11:15
Link con Hover de colores
http://www130.lunapic.com/editor/?CSS
/* unvisited link */
a:link {
color: #1559B7;
}
/* visited link */
a:visited {
color: #B715A9;
}
/* mouse over link */
a:hover {
color: #24D5E5;
}
/* selected link */
a:active {
color: #B715A9;
}
-
Par GloriaV le 17 Juillet 2015 à 11:18
Posición horisontal
Texto o imagen
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3"><em class="fa fa-heart">Texto o imagen</em></div>
<div class="col-md-3"><em class="fa fa-heart"><img src="https://lh6.googleusercontent.com/-2NuXShqiJf0/VOtSQQHSZTI/AAAAAAABdCI/2UZTq6tq1Dc/w200-h282-no/2-200x282.gif" alt="" width="150" height="170" /></em></div>
</div></div>
-
Par GloriaV le 17 Juillet 2015 à 14:04
Fuego artificial
Se puede cambiar los colores, pero es muy delicado para cambio.
HTML
<script type="text/javascript">
//<![CDATA[
var bits=100; // cuantos bits
var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10)
var speed=20; // rapidez (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
//azul rojo verde purpura cyan, naranjo
var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}
function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>
-
Par GloriaV le 18 Juillet 2015 à 15:58
Cambio de color de link con imagen acompañado
CSS
a:hover {
color:#5f77cf;
text-decoration:none;
background-image:url(http://dl.glitter-graphics.net/pub/299/299321jpkx4bzvv0.gif); background-repeat:no-repeat;
}
-
Par GloriaV le 20 Juillet 2015 à 18:43
<div style="background-color: #fff; -webkit-transform: skew(5deg,5deg); border-radius: 20px; box-shadow: 0 0px 4px #777, 0 0 20px #CCC inset; width: 400px; height: 100%;"><div style="padding: 11px;"><p>Texto, imagen</p><p> </p></div></div>
-
Par GloriaV le 23 Juillet 2015 à 13:59
HTML Javascript
<script type="text/javascript">// <![CDATA[
var txt=" *** PapyrockTest ";
var espera=400;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
// ]]></script>
-
Par GloriaV le 30 Juillet 2015 à 12:52
¡Simplemente es una gran manera de cambiar la cubierta de la manta!
-
-
Par GloriaV le 12 Août 2015 à 13:09
Imagenes para encabezar la página
HTML JavaS
<script>// <![CDATA[
onJSFilesLoaded.push (function(){
if ($$('#menubar_section_account a[0]')){
var perso=$$('#menubar_section_account a');
var hre=perso[0].getProperty('href');
var txt=perso[0].getProperty('text');
var img=perso[0].getChildren()[0];
msg='<img src="http://www.gifandgif.es/gifs_animados/Premios/Gifs%20Animados%20Premios%20%2817%29.gif /> '+txt+' ';
msg+='<img src="http://www.glamik.ru/Glamik/melkie_cvetoch/54.gif"/>'+' Bonne Visite!'+' <img src="http://img0.liveinternet.ru/images/attach/c/0//47/188/47188957_1249552786_1_2.gif" />';
$('ok').set('html',msg);
}
});
// ]]></script>
-
Par GloriaV le 14 Août 2015 à 15:11
Fondo, bordes, sombra, imagen para los comentarios.
Añadir Script en parte común.
Generador de texto con vuesto imagen.
Para usar vuesro imagen: Tes figurines persos
HTML JavaS
<!------- gracias ------------------------------->
<script>// <![CDATA[
if(typeof(onJSFilesLoaded) != "object")
onJSFilesLoaded = [];
onJSFilesLoaded.push (function(){
function jigo(){
var lignescom=document.getElementsByTagName('a');
for(i=0;i<lignescom.length;i++){
var acom=lignescom[i];
var patt = new RegExp("comments");
var res = patt.test(acom);
if (res) {
var ex=acom.getProperty('text');
var lignecom = new RegExp("commentaire");
var reslignecom = lignecom.test(ex);
if (reslignecom) {
var im =acom.firstChild;
var nouveau=ex.replace("commentaire","Commentaire");
acom.setProperty('text',nouveau);
acom.setProperty('class','lignecom');
im.inject(acom,'bottom');
}
}
}
}
jigo();
setInterval(function(){jigo();},1000);
});
// ]]></script>CSS
<style type="text/css"><!--
.module_contenu_block>a
{
background-color: #;
color: black;
font-size: 23px;
text-shadow: 1px 1px 2px #000;
line-height:6.0em;
border: 1px dotted #956A48;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 5px black;
border-radius: 10px;
background-image: url('http://ekladata.com/iZLmW_VVm4oaSHHrbiwuvjKJtSc.gif');
}
.module_contenu_block>a:hover
{ color: purple;text-shadow: 0px 0px 0px black; background-image: url('http://ekladata.com/tutorialgloriav.eklablog.com/perso/GloriaV/55lis.gif');}
.lignecom:before{
position:relative;
top: 18px;
left:5px;
line-height:6.0em;
}
.lignecom:after{
content: url(http://ekladata.com/tutorialgloriav.eklablog.com/perso/GloriaV/1000.gif);
position:relative;
top: 18px;
left:15px;
}
.lignecom img{
display:none;}
--></style>
-
Par GloriaV le 8 Septembre 2015 à 12:23
Hover para comentariosCSS
<!------- comentarios ------------------------------->
<style type="text/css"><!--
.comment_admin {
border:dotted 1px #000;
border-radius: 20px;
box-shadow: 0 3px 5px #777, 0 3px 9px #CCC inset;
}
.commentavatar:hover
{
background-image: url('http://ekladata.com/iZLmW_VVm4oaSHHrbiwuvjKJtSc.gif');
background-repeat: repeat;
border:double 3px #999FAA;
border-radius: 10px;
box-shadow: 0 3px 5px #777, 0 3px 9px #CCC inset;
}
--></style>
<style type="text/css"><!--
.commentavatar:hover
{
background-image: url('http://ekladata.com/iZLmW_VVm4oaSHHrbiwuvjKJtSc.gif');
background-repeat: repeat;
border:double 3px #999FAA;
border-radius: 10px;
box-shadow: 0 3px 5px #777, 0 3px 9px #CCC inset;
}
--></style>
<style type="text/css"><!--
.comment_normal .commentheader:hover
{
background-image: url('http://ekladata.com/iZLmW_VVm4oaSHHrbiwuvjKJtSc.gif');
background-repeat: repeat;
border:double 3px #999FAA;
border-radius: 10px;
box-shadow: 0 3px 5px #777, 0 3px 9px #CCC inset;
}
--></style>
<style type="text/css"><!--
.commentbody:hover
{
background-image: url('http://ekladata.com/iZLmW_VVm4oaSHHrbiwuvjKJtSc.gif');
background-repeat: repeat;
border:double 3px #999FAA;
border-radius: 20px;
box-shadow: 0 3px 5px #777, 0 3px 9px #CCC inset;
}
--></style>
-
Par GloriaV le 11 Septembre 2015 à 10:30Fondo, fuente, bordes y sombra para texto que acompaña un imagen
<img src="http://www.123gif.de/gifs/ich-liebe-dich/ich-liebe-dich-0016.gif" alt=" Con amor. GloriaV" width="200" height="200" />
Si el código influye sobre tamaño del resto de los imágenes al lugar de:
.module_contenu img {max-width:610px;height:auto;}
Poner solo:
.module_contenu img {max-width:;height:;}
CSS
.module_contenu img {max-width:610px;height:auto;}
#help_bubble {display:none;
position:absolute;
z-index:401;
color:#000000;
font-size: 25px;
font-family: Edwardian Script ITC;
background-image: url('https://lh3.googleusercontent.com/-iagbw7IYhX4/VNyRm0igvMI/AAAAAAABb90/gWCWL4jMoD4/w149-h150-no/6.gif');
border-radius:160%/20%;
border: 1px dotted #fff;
box-shadow: 0 1px 5px #777, 0 1px 5px #CCC inset;
padding:8px;font-size: 22px;}
-
Par GloriaV le 16 Décembre 2015 à 12:09
Para España
HTML
<script type='text/javascript' src='http://www.aemet.es/es/eltiempo/prediccion/municipios/launchwidget/madrid-id28079?w=g4p01110001ovmffffffw202z325x4f86d9t95b6e9r1s3n2'></script><noscript><a target='_blank' style='font-weight: bold;font-size: 1.20em;' href='http://www.aemet.es/es/eltiempo/prediccion/municipios/madrid-id28079'>El Tiempo. Consulte la predicción de la AEMET para Madrid</a></noscript>
-
Par GloriaV le 28 Janvier 2016 à 18:49
Para la barra de desplazamiento de página y HTML
Usan escala hsl
Generador rgba, hlsa
a. http://www.workwithcolor.com/hsl-color-picker-01.htm
CSS
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
}
#PopularPosts1 img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:33px;height:33px;padding:3px}
::-webkit-scrollbar {width:19px;}
/* Track */
::-webkit-scrollbar-track {box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
/* Handle */
::-webkit-scrollbar-thumb {-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#b8cbec;box-shadow:0 0 6px #b8cbec;-webkit-box-shadow:0 0 6px #b8cbec;-moz-box-shadow:0 0 6px #b8cbec;}
::-webkit-scrollbar-thumb:window-inactive {background: #b8cbec;}
::selection {background:#d4d3d5; color:#FFF;}
::-moz-selection {background:#d4d3d5; color:#FFF;}
::-webkit-selection {background:#d4d3d5; color:#FFF;}
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0 0 10px hsla(0, 93%, 52%, .8);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.8);
box-shadow: 0 0 10px hsla(0, 93%, 49%, .8);
}
body::after {
content: "";
position: fixed;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, .8);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.8);
box-shadow: 0 0 10px hsla(0, 91%, 57%, .8);
}
@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1;}}
@-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1;}}
@-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1;}}
@keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1;}}
#PopularPosts1 h2 {border-bottom: 3px solid orange;text-align: center;padding-top: 10px;font-size: 15px;font-weight: bold;letter-spacing: 5px;color: hsl(0, 0%, 28%);}
#BlogArchive1 h2 {border-bottom: 3px solid hsl(115, 44%, 47%);text-align: center;padding-top: 10px;font-size: 15px;font-weight: bold;letter-spacing: 5px;color: hsl(0, 0%, 28%);}
#HTML1 h2 {border-bottom: 3px solid hsl(197, 31%, 75%);text-align: center;padding-top: 10px;font-size: 15px;font-weight: bold;letter-spacing: 5px;color: hsl(0, 0%, 28%);}
#bottom h6 { border-left: 5px solid #babbc4; background: #fafafa; }
#bottom ul li { display: block; padding: 7px 15px; color: rgb(209, 56, 56); font-size: 16px;margin-left: 0px; } #bottom ul li:hover { background: #babbc4; color: #fff; }
-
Par GloriaV le 18 Février 2016 à 12:17
HTML
<table border="0" width="50%"> <tbody> <tr><td><img src="http://otkrytkigif.ru/_ph/61/2/885098672.gif" alt="" width="135" height="139" border="0" /></td> <td rowspan="2"><img src="http://www.monsalvat.globalfolio.net/assets/trouver/orn/orn_0092.gif" alt="" width="195" height="278" border="0" /></td></tr><tr><td><img src="http://virtuellife.v.i.pic.centerblog.net/c0b5b071.jpg" alt="" width="135" height="139" border="0" /></td> </tr></tbody></table>
-
-
Numquam renuntiabit
<a href="http://tutorialgloriav.eklablog.com/"
target="_blank"><img src=
"http://ekladata.com/cEEYfZtSNwWA8Pt7k--C97p7qFs/34.gif"
alt="" width="120" /> -
Con mucho gusto y
gran placer os
presentó mi ayudante
-
"No puedes enseñárselo todo: sólo puedes ayudarle a encontrarlo por sí mismo."
Galileo Galilei y
-
Vivir en armonía con el universo es vivir lleno de alegría, amor y abundancia.
Shakti Gawain -
-
-
-
GloriaV666@gmail.com
Créer mon blog 
