CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

6 Nisan 2017 Perşembe

Vocabulary Finder

- - -




You have to allow pop-up to open all tabs properly. Thank you so much for using me! Maybe I'm a clunky app, but I'm handy! (Please use Google Chrome for more compatibility) I'm not clunky anymore!

See source code here
Or here

Hiç yorum yok:



28 Ekim 2015 Çarşamba

Güzel renkler

dodgerblue
yellowgreen
darkblue
nicered

<style>
  .dodgerblue{
    color:dodgerblue;
  }
  .yellowgreen{
      color:yellowgreen;
  }
  .darkblue{
      color:darkblue;
}
  .nicered{
      color:9F0509;
}
</style>
<p class="dodgerblue">dodgerblue</p>
<p class="yellowgreen">yellowgreen</p>
<p class="darkblue">darkblue</p>
<p class="nicered">nicered</p>

Hiç yorum yok:



27 Ekim 2015 Salı

Text ve Textarea / turuncu tema

<style>
  input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #DDDDDD;
  }
  input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px orange;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid orange;
  }
</style>

<form action="#" method="post">
  <div>
    <label for="textId" style="color:orange">Text</label>
    <input type="text" id="textId" value="" tabindex="1" />
  </div>
  <div>
    <label for="textareaId" style="color:orange">Textarea</label>
    <textarea cols="40" rows="8" name="textarea" id="textareaId"></textarea>
  </div>
</form> 

<style>
  @import "compass/css3";

  input[type=text], textarea {
    @include transition(all 0.30s ease-in-out);
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid orange;
  }
  input[type=text]:focus, textarea:focus {
    @include box-shadow(orange);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid orange;
  }
  label {
    width: 150px;
    float: left;
  }
  input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #DDDDDD;
  }
  input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px orange;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid orange;
  }
</style>

Hiç yorum yok:



14 Şubat 2015 Cumartesi

Making a Photo Gallery in Javascript

link: https://code.sololearn.com/W34beeUJglGx/#js

 HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div>
            <button onclick="prev()"> Prev </button>
            <img id="slider" src="http://www.sololearn.com/uploads/slider/1.jpg" width="200px" height="100px"/>
            <button onclick="next()"> Next </button>
        </div>
    </body>
</html>

CSS

button {
    margin-top:30px;
    float:left;
    height:50px;
}
img {
    float:left;
    margin-right:10px;
    margin-left:10px;
}

JS
var promptName = prompt("Whats your Name?");
var promptAge = prompt("How old are you?");

function person(){
    this.name = promptName;
    this.age = promptAge;
    this.birth = gelenYear;
}

function gelenYear(){
    return 2016 - this.age;
}

var p1 = new person();

document.write("Your name is " + p1.name + " and your birth year is " + p1.birth());

Hiç yorum yok:



:before & :after Attributes in CSS

Use of before & after attributes. We have used list class in this following example:
HTML
<html>
<head></head>
<body style="background-color:#272822">
<ul>
    <a href=""><li class="customStyle"><span>Anasayfa</span></li></a>
    <a href=""><li class="customStyle"><span>Kitaplar</span></li></a>
    <a href=""><li class="customStyle"><span>Yazarlar</span></li></a>
</ul>
</body>
</html>

CSS
ul {
    list-style: none;
    padding:3;
    margin:10;
}
li {
    padding-left: 5em;
    text-indent: -.em;
}
li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}
li:hover:before{
    content:" ○";
    color:white ;
}
li:after{
    content:" •";
    color:green;
}
li:hover:after{
    content:" ○";
    color:white;
}
a{text-decoration:none; color:pink;}
/*a:hover{background-color:white;}*/

.customStyle:hover{
background-color:gray;
transition-duration:0.4s;
color:red;
}     
/*li span{color:red;}*/   
li span{width:600px;  text-indent:1em; display:inline-block;}
li span:hover{color:black !important;

Hiç yorum yok:



Kaydol: Kayıtlar (Atom)