[]
yazılan kodu çalıştırmak
elimde şöyle bir kod var;
html {
background: #ecf0f1;
}
body {
margin: 0;
padding 0;
}
#menuToggle {
overflow: hidden;
position: absolute;
width: 100%;
height:100%;
display: flex-direction: column;
justify-content: center;
align-items: center;
}
#menuToggle Input {
display: flex;
width: 60px;
height: 60px;
position: absolute;
cursor: pointer;
opacity: 0; /* hide input */
z-index: 1; /* top of the menü */
}
şimdi bu kod web sitesi için bir animasyonlu buton fakat bu kodu visual studio da yazdıktan sonra animasyonlu halini ve görünümünü nasıl deneyeceğiz? css uzantılı çok eskiden sözlüğe tema yaparken dreamviewer falan kullanırdık öyle bir şey mi lazım? şu yaşımda 15 yaşımdaki halimden daha az anlıyorum bu işlerden gerçekten insan çok çabuk unutan bir varlık.
html {
background: #ecf0f1;
}
body {
margin: 0;
padding 0;
}
#menuToggle {
overflow: hidden;
position: absolute;
width: 100%;
height:100%;
display: flex-direction: column;
justify-content: center;
align-items: center;
}
#menuToggle Input {
display: flex;
width: 60px;
height: 60px;
position: absolute;
cursor: pointer;
opacity: 0; /* hide input */
z-index: 1; /* top of the menü */
}
şimdi bu kod web sitesi için bir animasyonlu buton fakat bu kodu visual studio da yazdıktan sonra animasyonlu halini ve görünümünü nasıl deneyeceğiz? css uzantılı çok eskiden sözlüğe tema yaparken dreamviewer falan kullanırdık öyle bir şey mi lazım? şu yaşımda 15 yaşımdaki halimden daha az anlıyorum bu işlerden gerçekten insan çok çabuk unutan bir varlık.
İlk not: Bu css kodu herhangi bir animasyon içermiyor.
En basitinden bir text dosyası yaratın, uzantısını html olarak değiştirin.
Bu dosyayı herhangi bir text editorde açıp içine şunları yapıştırın:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<style>
html {
background: #ecf0f1;
}
body {
margin: 0;
padding 0;
}
#menuToggle {
overflow: hidden;
position: absolute;
width: 100%;
height:100%;
display: flex-direction: column;
justify-content: center;
align-items: center;
}
#menuToggle Input {
display: flex;
width: 60px;
height: 60px;
position: absolute;
cursor: pointer;
opacity: 0; /* hide input */
z-index: 1; /* top of the menü */
}
</style>
</head>
<body>
//**Buraya da bu csste belirttiğiniz class veya id'lere bağlı elementleri koymanız gerekiyor. **//
</body>
</html>
Daha sonra dosyayı chromeda açın.
En basitinden bir text dosyası yaratın, uzantısını html olarak değiştirin.
Bu dosyayı herhangi bir text editorde açıp içine şunları yapıştırın:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<style>
html {
background: #ecf0f1;
}
body {
margin: 0;
padding 0;
}
#menuToggle {
overflow: hidden;
position: absolute;
width: 100%;
height:100%;
display: flex-direction: column;
justify-content: center;
align-items: center;
}
#menuToggle Input {
display: flex;
width: 60px;
height: 60px;
position: absolute;
cursor: pointer;
opacity: 0; /* hide input */
z-index: 1; /* top of the menü */
}
</style>
</head>
<body>
//**Buraya da bu csste belirttiğiniz class veya id'lere bağlı elementleri koymanız gerekiyor. **//
</body>
</html>
Daha sonra dosyayı chromeda açın.
- quaker
(09.08.22 16:21:16 ~ 16:23:28)
söylendiği gibi bu bir css kodu yani aslında bir kıyafet sadece. siz bu kıyafeti giydireceğiniz butonu html ile oluşturup, kıyafet olarak bunu tanımlayacaksınız.
- Mihendiss
(10.08.22 09:18:24)
1
