Skip to content

Instantly share code, notes, and snippets.

@zkreations
zkreations / ScrollToTop.css
Created July 31, 2018 21:26
ScrollToTop animation using pure javascript (not jquery)
/*!
=> Plugin: scrollToTop
=> by zkreations.com | Daniel Abel
*/
/*reset button*/
.scrollToTop {
outline: none;
border: none;
font-size: 14px;
cursor: pointer;
@zkreations
zkreations / contador-anime-static.css
Created January 2, 2018 18:03
Estilos para contador Anime estatico
/*! Anime Counter (static) v1.0.0 */
/*counter*/
.anime-counter-static {
font-size: 16px;
overflow: hidden;
border-radius: 3px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .75);
}
.anime-counter-static .counter {
font-family: arial;
@zkreations
zkreations / fixed-form.css
Last active December 5, 2017 19:13
Fixed form css (Blogger)
/*! Fixed-Form v1.0.0 */
/* Form icons */
@font-face {
font-family: "fixed-form";
src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAsAAAAABlwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAVwAAAGEGbz6dEZGVE0AAAJkAAAAGgAAABx41SUoR0RFRgAAAoAAAAAdAAAAIAAwAARPUy8yAAACoAAAAEcAAABgUB5etGNtYXAAAALoAAAAQAAAAUoB2QJVaGVhZAAAAygAAAApAAAANg21w1VoaGVhAAADVAAAABgAAAAkBC8CA2htdHgAAANsAAAACgAAAAoEFQAAbWF4cAAAA3gAAAAGAAAABgADUABuYW1lAAADgAAAANwAAAGhNkYitHBvc3QAAARcAAAAEAAAACAAAwABeJxNkEFLAlEQx+fpvlxssRQ3ijZvEh36BJ2ibh6TTh0UWkPSWqSkW4GYT2ff6oodA+sQ2D2PXYJuQgePQR+gD/AePMHWiIqBmR/zH/5/GAKaBoSQ+ULxwj7cLJxWykBCQGBbroVkKiyXNdcgaITR0FJRWNlLTBF/wYggyhvZoxbwBQtg0YJu3AoGOUuANrMxIA6rkHbyjl3ZdEr5E9su54ulv7R/uQCkQRiECQlV3mPSlb7JOHMb2EDWajb1iaMeaJ2xOtbcmnfdbeqCHohXcatQveA6xYYb3HPmsXaLtzhy9LHDvY7+9iGW9uls5X0X577ntV1fH8sMdbvMr3f0mBjIpJlTyWFEZDNmVWX7AeR+4LFqPvVRDSZZRDEYnqO4ElOkapwzUR2L1O7nswqkOxG06vAexVGgTTZMMUI1EltUTFXaRJFW1g6NyV4SzeBxl9jHOc+IfgGX2qTKeJxjYGBgZACCM7aLzoPoa94HdWA0AEoNBpgAAHicY2BkYGDgA2IJBhBgYmAEQhDJA
@zkreations
zkreations / cardFlip.css
Created December 3, 2017 17:28
flip css
/*Card Flip v1.0.0*/
.cardFlip {
perspective: 2000px;
transform-style: preserve-3d;
position: relative;
display: inline-block;
cursor: pointer;
font-size: 10px;
}
.cardFlip.is-active .cardFlip__cover {
@zkreations
zkreations / contador-regresivo.js
Created October 4, 2017 14:09
Javascript incluido la data de Blogger para contador regresivo
//<![CDATA[
'use strict';
var getRemainingTime = function getRemainingTime(deadline) {
var now = new Date(),
remainTime = (new Date(deadline) - now + 1000) / 1000,
remainSeconds = ('0' + Math.floor(remainTime % 60)).slice(-2),
remainMinutes = ('0' + Math.floor(remainTime / 60 % 60)).slice(-2),
remainHours = ('0' + Math.floor(remainTime / 3600 % 24)).slice(-2),
remainDays = Math.floor(remainTime / (3600 * 24));
@zkreations
zkreations / contador-regresivo.css
Last active October 4, 2017 14:19
CSS para contador regresivo
/*! Contador regresivo v1.0.0 */
/*reset*/
.counter-clock,
.counter-clock *,
.counter-clock ::after,
.counter-clock ::before {
box-sizing: border-box;
}
/*contador*/
@zkreations
zkreations / vimeo-list.css
Last active August 31, 2017 22:26
Estilos para el widget lista de videos de vimeo
/*! vimeo list 1.0.1 */
/*mini-reset*/
.vimeo--items,
.vimeo--items *,
.vimeo--items ::after,
.vimeo--items ::before {
box-sizing: border-box;
}
.card--vimeo__img embed,
.card--vimeo__img iframe,
@zkreations
zkreations / youtube-list.css
Last active August 29, 2017 07:19
Estilos para el widget Lista de videos de youtube
/*! youtube list 1.0.1 */
/*mini-reset*/
.youtube--items,
.youtube--items *,
.youtube--items ::after,
.youtube--items ::before {
box-sizing: border-box;
}
.card--youtube__img embed,
.card--youtube__img iframe,
@zkreations
zkreations / search-style.css
Last active July 31, 2018 21:29
Cambiar estilos para búsquedas
.result-search {
position: relative;
margin-bottom: .5rem;
padding: 1.5rem 1.2rem;
background: rgba(0, 0, 0, 0.08);
width: 100%;
}
.result-search__data {
margin-left: calc(75px + 1rem);
}
@zkreations
zkreations / firstag-tag.css
Last active July 31, 2018 21:30
Destacar la primera etiqueta, entradas de blogger
.firstag {
position: relative;
display: block;
}
.firstag-name {
position: absolute;
top: .5rem;
right: .5rem;
padding: .2rem .5rem;
background-color: #00BCD4;