CSS + Giriş Font Boyutu Seçimi

<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
  font-family: 'Fira Sans Condensed', sans-serif;
}
.container {
    font-size: 15px;
    border: 1px dotted tomato;
    padding: 15px;
}
.container,
.wrapper {
    max-width: 700px;
    margin: auto;
    transition: font-size 1s;
}
h1 {
    font-size: 2em;
}
h1::after {
    content: "";
    display: block;
    max-width: 700px;
    padding-bottom: 10px;
    border-bottom: 1px dotted tomato;
}
h2 {
    font-size: 1.5em;
}
p {
    font-size: 1.2em;
}
input[type="radio"] {
    -webkit-appearance: none;
    height: 30px;
    width: 30px;
    background-color: tomato;
    display: inline-block;
    outline: none;
    transition: background-color .7s;
}
input[type="radio"]:hover {
    background-color: #ffa494;
    transition: background-color .7s;
}
input[type="radio"]:checked {
    background-color: #ffa494;
    transition: background-color .7s;
}
input[type="radio"]:checked::after {
    color: white;
}
input[type="radio"]#small::after {
    font-size: 10px;
    content: "A";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
input[type="radio"]#medium::after {
    font-size: 15px;
    content: "A";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
input[type="radio"]#large::after {
    font-size: 20px;
    content: "A";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
input[type="radio"]#small:checked ~ .container {
    font-size: 10px;
}
input[type="radio"]#medium:checked ~ .container {
    font-size: 15px;
}
input[type="radio"]#large:checked ~ .container {
    font-size: 20px;
}
.informative {
    color: tomato;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="radio" name="group" id="small">
<input type="radio" name="group" id="medium" checked>
<input type="radio" name="group" id="large">
<div class="container">
<h1>CSS + Giriş Font Boyutu Seçimi</h1>
<h2>Blogunuza Adsense Reklam Kodları Nasıl Eklenir?</h2>
<p class="informative">Blogger HTML Dönüştürücü</p>
<p>Adsense hesabınızda oluşturmuş olduğunuz Adsense HTML kodlarını doğrudan blogunuzun HTML yani şablon içerisine kopyalayarak eklemeniz mümkün olmayacaktır. Google Adsense veya harhangi bir javascript kodlarını blogunuzun HTML kısmına eklemek için HTML kodunu aşağıdaki kutuya kopyala - yapıştır yaparak ekleyin ve ardından Dönüştür düğmesine tıklayın. Dönüştürülmüş kodu blogunuza ekleyebilirsiniz.</p>
</div> 
</div>
</body>
</html>

Kodeks Editör

CSS + Giriş Font Boyutu Seçimi

"CSS + Giriş Font Boyutu Seçimi" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

CSS + Giriş Font Boyutu Seçimi

"CSS + Giriş Font Boyutu Seçimi" 0 Yorum yapıldı.

Yorum Gönder