Kατεβάσετε την εφαρμογή android του blog! DownLoad

FoulsCode: 2011-17

Translate

Πρόσφατα Σχόλια

Σύνολο αναρτήσεων

Συνολικές προβολές σελίδας

Εμφάνιση αναρτήσεων με ετικέτα Image Slider. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Image Slider. Εμφάνιση όλων των αναρτήσεων

Προτεινόμενα Post από CSS, jQuery (Πορτοκαλί)

Written By Fouls Code on Τετάρτη, 3 Απριλίου 2013 | Απριλίου 03, 2013




Το έκανα σε πορτοκαλι πειράζοντας το css για τα ταιριάζει το χρώμα με το blog μπορείτε να το κάνετε ότι χρώμα θέλετε!



Αντιγραφή επικόλληση τον κώδικα:

<style scoped="" type="text/css">/* foulscode.blogspot.gr */#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{height:250px}#slides li{width:49.9%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#D15801;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #D15801;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}#buttons{margin:5px 0 0}#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #D15801 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #D15801;margin-left:-3px}@media only screen and (max-width:600px){  #slides ul{height:600px}  #slides li:nth-child(1){width:100%;height:49.8%}  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}}/* foulscode.blogspot.gr */</style><div id="featuredpost"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://foulscode.blogspot.com",MaxPost:8,idcontaint:"#featuredpost",ImageSize:300,interval:5000,autoplay:true,tagName:false});});//]]></script>


Και αφού βάλετε το δικό σας link είστε έτοιμη να κάνετε αποθήκευση.


Απριλίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Pure CSS - Image Slider

Written By Fouls Code on Πέμπτη, 28 Μαρτίου 2013 | Μαρτίου 28, 2013




Αντιγραφή επικόλληση τον παρακάτω κοντιά:


<style>
/* foulscode.blogspot.gr */
body {
  background: #ccc;
  width: 950px;
  margin: 0 auto;
  padding: 10px;
}
.slider {
  background: #111;
  width: 950px;
  height: 350px;
  padding: 10px;
  position: relative;
  top: 10px;
  box-shadow: 0 30px 50px -20px black;
  overflow: hidden;
}
.images {
  background: #ccc;
  width: 100%;
  height: 74%;
  transition: background .5s linear;
}
input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #444;
  background-size: 225px 70px;
  width: 225px;
  height: 70px;
  margin: 5px;
  cursor: pointer;
  position: relative;
  float: left;
  top: 270px;
  -webkit-filter: sepia();
}
input[type='radio']:checked {
  content: '';
  border: solid 5px #ccc;
  box-shadow: none;
  -webkit-filter: none;
}
input[type='radio']:hover{
  border: solid 5px #fff;
  -webkit-filter: none;
  transform: scale(1.05);
  z-index: 9999;
}
.slide1 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg);
}
.slide2 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand2.jpg);
}
.slide3 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand3.jpg);
}
.slide4 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand4.jpg);
}
.slide1:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg);
}
.slide2:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand2.jpg);
}
.slide3:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand3.jpg);
}
.slide4:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand4.jpg);
}
h3{
  color: #000;
  font-family: 'Courier';
  margin: 30px -15px 0 0;
  text-align: right;
  text-shadow: 2px 2px 2px #fff;
}
h3 a{
  color: #000;
  text-decoration: none;
}
/* foulscode.blogspot.gr */
</style>
<div class='slider'>
  <input checked='' class='slide1' name='thumbnail' type='radio' />
  <input class='slide2' name='thumbnail' type='radio' />
  <input class='slide3' name='thumbnail' type='radio' />
  <input class='slide4' name='thumbnail' type='radio' />
  <div class='images'></div>
</div>
<h3>
  created by
  <a href='https://foulscode.blogspot.gr' target='_blank'>foulscode</a>
</h3>




DEMO



Αντικαταστήστε τα URL τον εικόνων με τα δικά σας URL αποθήκευση και τελειώσατε!
Μαρτίου 28, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Προτεινόμενα Post από CSS, jQuery

Written By Fouls Code on Τετάρτη, 27 Μαρτίου 2013 | Μαρτίου 27, 2013




Αντιγραφή επικόλληση τον κώδικα:


<style scoped="" type="text/css">
/* foulscode.blogspot.gr */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
/* foulscode.blogspot.gr */
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://foulscode.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

DEMO


Και αφού βάλετε το δικό σας link είστε έτοιμη να κάνετε αποθήκευση.
Μαρτίου 27, 2013 | 0 σχόλια | Διαβάστε περισσότερα
 
berita unik