Effekter

Transition

Använd mjuk övergång för effekter
Visa kod

/**
 * Sätt en mjuk övergång på objekt med
 * klassen transtion
 */

.transition {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Gråskala

Gråskala ex. en bild
Visa kod

/**
 * Gråskala objekt med klassen greyscale
 */

.greyscale {
    -webkit-filter: grayscale(100%);
}

/**
 * Ta bort gråskala vid mouseover över greyscale-objektet
 */

.greyscale:hover {
    -webkit-filter: grayscale(0%);
}

Opacitet

Ändra opacitet för ex. en bild
Visa kod

/**
 * Ändra opacitet för ett objekt med
 * klassen opacity
 */

.opacity {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/**
 * Ändra opacitet vid mouseover för
 * objekt med klassen opacity
 */

.opacity:hover {
    filter: alpha(opacity=100);
    opacity: 1;
}

Skala

Ändra skala för ex. en bild
Visa kod

/**
 * Ändra skala för ett objekt med
 * klassen scale
 */

.scale {
    -webkit-transform: scale(1);
    -moz-transform:    scale(1);
    -ms-transform:     scale(1);
    -o-transform:      scale(1);
    transform:         scale(1);
}

/**
 * Ändra skala vid mouseover för
 * objekt med klassen scale
 */

.scale:hover {
    -webkit-transform: scale(1.5);
    -moz-transform:    scale(1.5);
    -ms-transform:     scale(1.5);
    -o-transform:      scale(1.5);
    transform:         scale(1.5);
}

Rotera

Rotera ex. en bild
Visa kod

/**
 * Rotera ett objekt med
 * klassen rotate
 */

.rotate {
    -webkit-transform: rotate(0deg);
    -moz-transform:    rotate(0deg);
    -ms-transform:     rotate(0deg);
    -o-transform:      rotate(0deg);
    transform:         rotate(0deg);
}

/**
 * Rotera ett objekt vid mouseover för
 * objekt med klassen rotate
 */

.rotate:hover {
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    transform:         rotate(45deg);
}
 
DesignSmart - en del av SiteSmart

Denna sida och produktion av designmallar är ett samarbete mellan MediaVault International AB, SiteSmart Sales Sweden AB och våra designpartners. SiteSmart erbjuder webbsidor med CMS/Publiceringsverktyg, E-handelsverktyg och andra moduler samt relaterade produkter och tjänster för hemsidor. MediaVault International utvecklar de verktyg som marknadsföres av SiteSmart.

Kontakta oss nu

Bispmotalagatan 1 | 591 35 Motala
Telefon: 0141-20 25 40
E-post » info@sitesmart.se

Öppettider

Vår support har öppet helgfria vardagar 
08.00 - 17.00. Ring 0141-20 25 40 eller hitta information och filmer på » www.sitesmartsupport.se

Samtliga produkter under varumärket SiteSmart ® utvecklas av MediaVault International AB.

» Våra villkor

Copyright © 2015 SiteSmart, all rights reserved   |   » Sitemap   |   » Cookies