[ { "0": "3", "1": "Features - wallabag", "2": "https://www.wallabag.org/features/", "3": "0", "4": "1", "5": "\n\t\t

Here are some features. If one is missing, you can open a new issue.

\n", "6": "1", "id": "3", "title": "Features - wallabag", "url": "https://www.wallabag.org/features/", "is_read": "0", "is_fav": "1", "content": "\n\t\t

Here are some features. If one is missing, you can open a new issue.

\n", "user_id": "1", "tags": "" }, { "0": "10", "1": "Recreating The Square Slider", "2": "http://gilbert.pellegrom.me/recreating-the-square-slider", "3": "0", "4": "0", "5": "

The new Square site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.

\n\n

\n Demo | Download\n

\n\n\n\n

The HTML

\n\n
<div class=\"square-slider\">  \n    <div class=\"slide slide1\">\n        <div class=\"content light\">\n            <h3>Recreating The Square Slider</h3>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n        </div>\n        <img src=\"images/asset1.png\" alt=\"\" class=\"asset\" />\n    </div>\n    <div class=\"slide slide2\">\n        <div class=\"content dark\">\n            <h3>Looks Amazing Right?</h3>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n        </div>\n        <img src=\"images/asset2.png\" alt=\"\" class=\"asset\" />\n    </div>\n    <div class=\"slide slide3 inverted\">\n        <div class=\"content light\">\n            <h3>And Simple To Use</h3>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n        </div>\n        <img src=\"images/asset3.png\" alt=\"\" class=\"asset\" />\n    </div>\n    <a href=\"#\" class=\"prev\">Prev</a>\n    <a href=\"#\" class=\"next\">Next</a>\n    <div class=\"overlay\"></div>\n</div>
\n\n

The CSS

\n\n
.square-slider {  \n    overflow: hidden;\n    position: relative;\n    background: #fff;\n}\n.square-slider .slide {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    opacity: 0;\n    -moz-opacity: 0;\n    -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    -moz-transform: translate3d(0, 0, 0);\n    -webkit-transform: translate3d(0, 0, 0);\n    -o-transform: translate3d(0, 0, 0);\n    -ms-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0);\n}\n.square-slider .slide:first-child { display: block; }\n.square-slider .slide:first-child,\n.square-slider .slide.active {\n    opacity: 1;\n    -moz-opacity: 1;\n}\n.square-slider .slide .content {\n    position: absolute;\n    top: 40%;\n    left: 50%;\n    margin-left: -450px;\n    width: 360px;\n    text-shadow: 0 1px 1px rgba(0,0,0,0.3);\n    z-index: 7;\n    -webkit-transition-property: -webkit-transform,opacity;\n    -moz-transition-property: -moz-transform,opacity;\n    -webkit-transition-duration: 800ms,700ms;\n    -moz-transition-duration: 800ms,700ms;\n    -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -webkit-transform: translate3d(-30px, 0, 0);\n    -moz-transform: translate(-30px, 0);\n}\n.square-slider .slide.inverted .content {\n    left: auto;\n    right: 50%;\n    margin-left: 0;\n    margin-right: -450px;\n    -webkit-transform: translate3d(30px, 0, 0);\n    -moz-transform: translate(30px, 0);\n}\n.square-slider .slide.active .content {\n    -webkit-transform: translate3d(0, 0, 0);\n    -moz-transform: translate(0, 0);\n}\n.square-slider .slide .asset {\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    -webkit-transition-property: -webkit-transform,opacity;\n    -moz-transition-property: -moz-transform,opacity;\n    -webkit-transition-duration: 800ms,700ms;\n    -moz-transition-duration: 800ms,700ms;\n    -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -webkit-transform: translate3d(0, 0, 0);\n    -moz-transform: translate(0, 0);\n}\n.square-slider .slide.inverted .asset {\n    left: auto;\n    right: 50%;\n}\n.square-slider .slide.active .asset {\n    -webkit-transform: translate3d(-7px, 3px, 0);\n    -moz-transform: translate(-7px, 3px);\n}\n.square-slider .slide.inverted.active .asset {\n    -webkit-transform: translate3d(7px, 3px, 0);\n    -moz-transform: translate(7px, 3px);\n}\n.square-slider .prev,\n.square-slider .next {\n    background: url(images/nav.png) no-repeat;\n    display: block;\n    width: 67px;\n    height: 67px;\n    position: absolute;\n    top: 50%;\n    margin-top: -30px;\n    z-index: 10;\n    border: 0;\n    text-indent: -9999px;\n    display: none;\n    opacity: 0.6;\n    -moz-opacity: 0.6;\n    -webkit-transition: opacity 0.5s ease-in;\n    -moz-transition: opacity 0.5s ease-in;\n    -ms-transition: opacity 0.5s ease-in;\n    -o-transition: opacity 0.5s ease-in;\n    transition: opacity 0.5s ease-in;\n}\n.square-slider .prev { \n    left: 40px; \n    background-position: 0 100%;\n}\n.square-slider .next { right: 40px; }\n.square-slider .prev:hover,\n.square-slider .next:hover {\n    opacity: 1;\n    -moz-opacity: 1;\n}\n.square-slider .overlay {\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 300%;\n    height: 100%;\n    z-index: 5;\n    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n}\n\n\n.square-slider {\n    width: 100%;\n    height: 550px;\n    margin: 40px auto;\n}\n.square-slider .slide .content.light { color: #fff; }\n.square-slider .slide .content.dark { \n    color: #333; \n    text-shadow: 0 1px 1px rgba(255,255,255,0.3);\n}\n.square-slider .slide1 { background: url(images/bg1.jpg) no-repeat 50% 50%; }\n.square-slider .slide2 { background: url(images/bg2.jpg) no-repeat 50% 50%; }\n.square-slider .slide3 { background: url(images/bg3.jpg) no-repeat 50% 50%; }
\n\n

The Javascript (jQuery)

\n\n
(function($){\n\n    $('.square-slider').each(function(){\n        var slider = $(this),\n            slides = slider.find('.slide'),\n            currentSlide = 0;\n\n        slides.show();\n        $(slides[currentSlide]).addClass('active');\n        $('.next,.prev', slider).show();\n\n        $('.prev', slider).on('click', function(){\n            slides.removeClass('active');\n            currentSlide--;\n            if(currentSlide < 0) currentSlide = slides.length - 1;\n            $(slides[currentSlide]).addClass('active');\n            return false;\n        });\n\n        $('.next', slider).on('click', function(){\n            slides.removeClass('active');\n            currentSlide++;\n            if(currentSlide > slides.length - 1) currentSlide = 0;\n            $(slides[currentSlide]).addClass('active');\n            return false;\n        });\n    });\n\n})(window.jQuery);
\n\n

A Few Notes

\n\n

Enjoy.

\n ", "6": "1", "id": "10", "title": "Recreating The Square Slider", "url": "http://gilbert.pellegrom.me/recreating-the-square-slider", "is_read": "0", "is_fav": "0", "content": "

The new Square site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.

\n\n

\n Demo | Download\n

\n\n\n\n

The HTML

\n\n
<div class=\"square-slider\">  \n    <div class=\"slide slide1\">\n        <div class=\"content light\">\n            <h3>Recreating The Square Slider</h3>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n        </div>\n        <img src=\"images/asset1.png\" alt=\"\" class=\"asset\" />\n    </div>\n    <div class=\"slide slide2\">\n        <div class=\"content dark\">\n            <h3>Looks Amazing Right?</h3>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n        </div>\n        <img src=\"images/asset2.png\" alt=\"\" class=\"asset\" />\n    </div>\n    <div class=\"slide slide3 inverted\">\n        <div class=\"content light\">\n            <h3>And Simple To Use</h3>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n        </div>\n        <img src=\"images/asset3.png\" alt=\"\" class=\"asset\" />\n    </div>\n    <a href=\"#\" class=\"prev\">Prev</a>\n    <a href=\"#\" class=\"next\">Next</a>\n    <div class=\"overlay\"></div>\n</div>
\n\n

The CSS

\n\n
.square-slider {  \n    overflow: hidden;\n    position: relative;\n    background: #fff;\n}\n.square-slider .slide {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    opacity: 0;\n    -moz-opacity: 0;\n    -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n    -moz-transform: translate3d(0, 0, 0);\n    -webkit-transform: translate3d(0, 0, 0);\n    -o-transform: translate3d(0, 0, 0);\n    -ms-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0);\n}\n.square-slider .slide:first-child { display: block; }\n.square-slider .slide:first-child,\n.square-slider .slide.active {\n    opacity: 1;\n    -moz-opacity: 1;\n}\n.square-slider .slide .content {\n    position: absolute;\n    top: 40%;\n    left: 50%;\n    margin-left: -450px;\n    width: 360px;\n    text-shadow: 0 1px 1px rgba(0,0,0,0.3);\n    z-index: 7;\n    -webkit-transition-property: -webkit-transform,opacity;\n    -moz-transition-property: -moz-transform,opacity;\n    -webkit-transition-duration: 800ms,700ms;\n    -moz-transition-duration: 800ms,700ms;\n    -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -webkit-transform: translate3d(-30px, 0, 0);\n    -moz-transform: translate(-30px, 0);\n}\n.square-slider .slide.inverted .content {\n    left: auto;\n    right: 50%;\n    margin-left: 0;\n    margin-right: -450px;\n    -webkit-transform: translate3d(30px, 0, 0);\n    -moz-transform: translate(30px, 0);\n}\n.square-slider .slide.active .content {\n    -webkit-transform: translate3d(0, 0, 0);\n    -moz-transform: translate(0, 0);\n}\n.square-slider .slide .asset {\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    -webkit-transition-property: -webkit-transform,opacity;\n    -moz-transition-property: -moz-transform,opacity;\n    -webkit-transition-duration: 800ms,700ms;\n    -moz-transition-duration: 800ms,700ms;\n    -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n    -webkit-transform: translate3d(0, 0, 0);\n    -moz-transform: translate(0, 0);\n}\n.square-slider .slide.inverted .asset {\n    left: auto;\n    right: 50%;\n}\n.square-slider .slide.active .asset {\n    -webkit-transform: translate3d(-7px, 3px, 0);\n    -moz-transform: translate(-7px, 3px);\n}\n.square-slider .slide.inverted.active .asset {\n    -webkit-transform: translate3d(7px, 3px, 0);\n    -moz-transform: translate(7px, 3px);\n}\n.square-slider .prev,\n.square-slider .next {\n    background: url(images/nav.png) no-repeat;\n    display: block;\n    width: 67px;\n    height: 67px;\n    position: absolute;\n    top: 50%;\n    margin-top: -30px;\n    z-index: 10;\n    border: 0;\n    text-indent: -9999px;\n    display: none;\n    opacity: 0.6;\n    -moz-opacity: 0.6;\n    -webkit-transition: opacity 0.5s ease-in;\n    -moz-transition: opacity 0.5s ease-in;\n    -ms-transition: opacity 0.5s ease-in;\n    -o-transition: opacity 0.5s ease-in;\n    transition: opacity 0.5s ease-in;\n}\n.square-slider .prev { \n    left: 40px; \n    background-position: 0 100%;\n}\n.square-slider .next { right: 40px; }\n.square-slider .prev:hover,\n.square-slider .next:hover {\n    opacity: 1;\n    -moz-opacity: 1;\n}\n.square-slider .overlay {\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 300%;\n    height: 100%;\n    z-index: 5;\n    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n}\n\n\n.square-slider {\n    width: 100%;\n    height: 550px;\n    margin: 40px auto;\n}\n.square-slider .slide .content.light { color: #fff; }\n.square-slider .slide .content.dark { \n    color: #333; \n    text-shadow: 0 1px 1px rgba(255,255,255,0.3);\n}\n.square-slider .slide1 { background: url(images/bg1.jpg) no-repeat 50% 50%; }\n.square-slider .slide2 { background: url(images/bg2.jpg) no-repeat 50% 50%; }\n.square-slider .slide3 { background: url(images/bg3.jpg) no-repeat 50% 50%; }
\n\n

The Javascript (jQuery)

\n\n
(function($){\n\n    $('.square-slider').each(function(){\n        var slider = $(this),\n            slides = slider.find('.slide'),\n            currentSlide = 0;\n\n        slides.show();\n        $(slides[currentSlide]).addClass('active');\n        $('.next,.prev', slider).show();\n\n        $('.prev', slider).on('click', function(){\n            slides.removeClass('active');\n            currentSlide--;\n            if(currentSlide < 0) currentSlide = slides.length - 1;\n            $(slides[currentSlide]).addClass('active');\n            return false;\n        });\n\n        $('.next', slider).on('click', function(){\n            slides.removeClass('active');\n            currentSlide++;\n            if(currentSlide > slides.length - 1) currentSlide = 0;\n            $(slides[currentSlide]).addClass('active');\n            return false;\n        });\n    });\n\n})(window.jQuery);
\n\n

A Few Notes

\n\n

Enjoy.

\n ", "user_id": "1", "tags": "" }, { "0": "11", "1": "J’aime le logiciel libre", "2": "http://framablog.org/2015/02/14/jaime-le-logiciel-libre/", "3": "0", "4": "0", "5": "\n

Aujourd’hui, c’est la Saint Valentin, et l’occasion de déclarer son amour des logiciels libres !

\n

\"ilovefs-banner-extralarge\"

\n

Framasoft vous a déjà proposé son adaptation délirante de poèmes pour l’occasion, et voici une petite bande-dessinée qui synthétise l’événement :

\n

\"dm_001_jaime_le_logiciel_libre\"

\n

Cette bande-dessinée est extraite du nouveau blog Grise Bouille hébergé par Framasoft.

\n

Crédit : Simon Gee Giraudot (Creative Commons By-Sa)

\n
\"\"

Gee

\"\"

Auteur/dessinateur de bandes dessinées (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salarié.

", "6": "1", "id": "11", "title": "J’aime le logiciel libre", "url": "http://framablog.org/2015/02/14/jaime-le-logiciel-libre/", "is_read": "0", "is_fav": "0", "content": "\n

Aujourd’hui, c’est la Saint Valentin, et l’occasion de déclarer son amour des logiciels libres !

\n

\"ilovefs-banner-extralarge\"

\n

Framasoft vous a déjà proposé son adaptation délirante de poèmes pour l’occasion, et voici une petite bande-dessinée qui synthétise l’événement :

\n

\"dm_001_jaime_le_logiciel_libre\"

\n

Cette bande-dessinée est extraite du nouveau blog Grise Bouille hébergé par Framasoft.

\n

Crédit : Simon Gee Giraudot (Creative Commons By-Sa)

\n
\"\"

Gee

\"\"

Auteur/dessinateur de bandes dessinées (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salarié.

", "user_id": "1", "tags": "framasoft,tag" } ]