CSS3 in wordpress website

Opgelost repeat123
(@repeat123)

14 jaren, 6 maanden geleden

Hallo,

Ik heb dit gevonden op het internet: http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/

Geanimeerde CSS3 buttons.
Ik zou graag een knop van demo nr. 5 in een pagina willen van m’n website.
Ik heb in het gedownloade zip bestand verschillende dingen zitten. Ik neem aan dat ik eerst wat moet uploaden naar m’n server en daarna de CSS op m’n pagina zetten. Is er een plugin beschikbaar die toelaat CSS rechtstreeks in de pagina te plakken? Wat moet ik uploaden naar de server?

Alvast bedankt voor jullie hulp.

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)

Thread starter

(@repeat123)

Ik ben al wat verder:

1. Ik heb deze plugin gebruikt en daar de volgende css ingezet: http://wordpress.org/extend/plugins/css-javascript-toolbox/

.a-btn{
    background:#a9db80;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
    background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
    background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:90px;
    display:inline-block;
    position:relative;
    border:1px solid #80ab5d;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#6d954e;
    opacity:0;
    text-shadow:0px 1px 1px rgba(255,255,255,0.4);
    -webkit-transition:opacity 0.2s ease-in-out;
    -moz-transition:opacity 0.2s ease-in-out;
    -o-transition:opacity 0.2s ease-in-out;
    transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top:13px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #80ab5d;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#4e5c50 url(../images/arrow_down.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    -webkit-transform:scale(10);
    -moz-transform:scale(10);
    -ms-transform:scale(10);
    -o-transform:scale(10);
    transform:scale(10);
    opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#80ab5d;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -o-transform:scale(1.4);
    transform:scale(1.4);
}

2. Vervolgens deze code op de pagina zelf gezet:

<a href="#" class="a-btn">
    <span class="a-btn-slide-text">$29</span>
    <img src="images/icons/1.png" alt="Photos" />
    <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
    <span class="a-btn-icon-right"><span></span></span>
</a>

3. De tekst verschijnt niet in de button, verder werkt alles wel (afbeeldingen enzo)

Wat doe ik fout?

Jaja..

(@jaja-1)

14 jaren, 6 maanden geleden

Je hebt geen plugin nodig.

Want de plugin die je wilt gebruiken is eigenlijk voor mensen die elke pagina verschillende willen stijlen Art Direction heet dat.

Jij kunt de CSS code gewoon in je stylesheet plakken.

Eerst inloggen in je Admin.
Weergave > Editor

Aan de rechterkant zie je alle bestanden die in je thema verwerkt zitten kies daar helemaal onderaan voor style.css

En plaats (plak) je CSS code van hierboven in dit bestand. Plaats hem maar ergens onderaan in dit bestand.

Daarna ga je even kijken naar de het stukje code die je net geplakt hebt en zoek je deze regel op:

background:#4e5c50 url(../images/arrow_down.png) no-repeat center center;

En uit die regel verwijder je dit ../ (dus de twee puntjes en de slash) na de aanpassing staat er url(images/arrow_down.png) …

Dan het bestand opslaan.

En nu ben je bijna klaar we moeten alleen nog even twee afb. uploaden.
een afb. die heet arrow_down.png en de andere afb. heet 1.png dit zal waarschijnlijk een icon zijn.

Beide afb. upload je naar je thema folder via FTP en je stopt ze in de map die <images> heet.

Nu ben je bijna klaar nog 1 klein stapje.
In deze HTML code hieronder moeten we ook nog de link fixen die naar de afb. 1.png verwijst.

<a href="#" class="a-btn">
    <span class="a-btn-slide-text">$29</span>
    <img src="images/icons/1.png" alt="Photos" />
    <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
    <span class="a-btn-icon-right"><span></span></span>
</a>

Dat hierboven staat nu in je code en dan gaan we aanpassen met de code hieronder..

<a href="#" class="a-btn">
    <span class="a-btn-slide-text">$29</span>
    <img src="<?php bloginfo( 'template_directory' ); ?>/images/1.png" alt="Photos" />
    <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
    <span class="a-btn-icon-right"><span></span></span>
</a>

Opslaan en klaar.

Thread starter

repeat123

(@repeat123)

14 jaren, 6 maanden geleden

Hoi jaja, bedankt voor je hulp.
Ik krijg het echter nog niet werked. Ik heb al je stappen gevolgd, maar alleen de tekst verschijnt.

Thread starter

repeat123

(@repeat123)

14 jaren, 6 maanden geleden

Negeer m’n vorige post, ik ben al wat verder.

Alles werkt nu alleen de grootte van m’n buttons is nog niet zoals in het voorbeeld (http://tympanus.net/codrops/wp-content/uploads/2011/11/AnimatedButtons_05.jpg)

Ik heb de padding al veranderd naar dit:

padding:0px 30px 0px 70px;

Maar de button is nog steeds te groot (http://img692.imageshack.us/img692/5297/tegroot.png)

Hoe krijg ik hem hetzelfde formaat als het voorbeeld?
Alvast enorm bedankt!

Jaja..

(@jaja-1)

14 jaren, 6 maanden geleden

Zo uit mijn hoofd.

Kijk eens naar je line-height, het kan zijn dat je font-size bijv. 16px. is maar als je line-height dan op 28px staat dan kun je de padding zo laag maken als je zelf wilt maar dan blijft de hoogte altijd min. 28px.

Thread starter

repeat123

(@repeat123)

14 jaren, 6 maanden geleden

Ook als ik de liine-heigt naar 0px breng, gaat er maar een klein beetje af. Nog niet het gewenste resultaat dus…

Jaja..

(@jaja-1)

14 jaren, 6 maanden geleden

Dan kan ik het ik het zo ook niet zien.

Heb je geen URL?

Thread starter

repeat123

(@repeat123)

14 jaren, 6 maanden geleden

Daar zal ik na de carnaval voor zorgen, alvast bedankt voor je hulp!

Thread starter

repeat123

(@repeat123)

14 jaren, 6 maanden geleden

Oke, deze HTML code heb ik op de pagina zelf staan:

<a class="a-btn" style="text-decoration: none;" href="#">
<span class="a-btn-symbol">X</span>
<span class="a-btn-text">Download Now</span>
<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
</a>

En deze code staat in mijn style.css:

@font-face{
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.a-btn{
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    padding:0px 30px 0px 70px;
    position:relative;
    float:left;
    display:block;
    overflow:hidden;
    margin:0px;
    background:#fff;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0),color-stop(rgba(246,246,246,1),0.74),color-stop(rgba(237,237,237,1),1));
    background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
    background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
    background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
    background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
    -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn-symbol{
    font-family:'WebSymbolsRegular', cursive;
    color:#555;
    font-size:20px;
    text-shadow:1px 1px 2px rgba(255,255,255,0.5);
    position:absolute;
    left:20px;
    line-height:32px;
    -webkit-transition:opacity 0.3s ease-in-out;
    -moz-transition:opacity 0.3s ease-in-out;
    -o-transition:opacity 0.3s ease-in-out;
    transition:opacity 0.3s ease-in-out;
}
.a-btn-text{
    font-size:20px;
    color:#d7565b;
    font-weight:bold;
    line-height:0px
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    text-shadow:1px 1px 2px rgba(255,255,255,0.5);
    display:block;
}
.a-btn-slide-text{
    font-family:Arial, sans-serif;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#555;
    text-shadow:0px 1px 1px rgba(255,255,255,0.9);
}
.a-btn-slide-icon{
    position:absolute;
    top:-30px;
    width:22px;
    height:22px;
    background:transparent url(images/arrow_down_black.png) no-repeat top left;
    left:20px;
    opacity:0.4;
}
.a-btn:hover{
    background:#fff;
    -webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
    -moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:hover .a-btn-symbol{
    opacity:0;
}
.a-btn:hover .a-btn-slide-icon{
    -webkit-animation:slideDown 0.9s linear infinite;
    -moz-animation:slideDown 0.9s linear infinite;
    animation:slideDown 0.9s linear infinite;
}
.a-btn:active{
    background:#d7565b;
    -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1);
    -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1);
    box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:active .a-btn-text{
    color:#fff;
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
}
.a-btn:active .a-btn-slide-text{
    color:rgba(0,0,0,0.4);
    text-shadow:none;
}
@keyframes slideDown{
    0% { top: -30px; }
    100% { top: 80px;}
}
@-webkit-keyframes slideDown{
    0% { top: -30px; }
    100% { top: 80px;}
}
@-moz-keyframes slideDown{
    0% { top: -30px; }
    100% { top: 80px;}
}

Heb de code wat aangepast (line-heigt op 0 px bij ‘.a-btn-text{
‘ Hierdoor wordt de button wat smaller, maar nog niet zoals ik het wil hebben (zie voorbleeld).

Hier is te zien hoe het er nu uitziet op mijn website.

Alvast bedankt voor je hulp!

Thread starter

repeat123

(@repeat123)

14 jaren, 6 maanden geleden

bump

Jaja..

(@jaja-1)

14 jaren, 6 maanden geleden

Sorry maar zet eerst even dat blokken van je rechtermuis klik uit als je geholpen wilt worden.

Zwaar irritant en ik ga mijn Javascript niet uitzetten om gebruik te kunnen maken van rechtermuis klik.