[]
codepen html dosyası hakkında
Merhaba duyuru sakini kodcuları,
(git: codepen.io) bu örnekte olduğu gibi style.css ve script.js yi index.html e çağırmama rağmen gelmiyor.. Nereye hangi tagları yazmam gerekiyor. görseli css den çağrıldığı için onu import etmiyorum tekrardan.
Bunu çözemedim.
(git: codepen.io) bu örnekte olduğu gibi style.css ve script.js yi index.html e çağırmama rağmen gelmiyor.. Nereye hangi tagları yazmam gerekiyor. görseli css den çağrıldığı için onu import etmiyorum tekrardan.
Bunu çözemedim.
CSS'ten compiled'ı seçmeniz gerekiyor.
//index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="slider" name="slider" type="range" value=0>
<label for="slider">0</label>
<a class="twitter-link" href="twitter.com" target="_blank" >by @phil_osophie</a>
</body>
<script src="script.js"></script>
</html>
// Style.css
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #a9cbee;
}
input[type="range"] {
-webkit-appearance: none;
background: transparent;
width: 90%;
max-width: 500px;
outline: none;
}
input[type="range"]:focus,
input[type="range"]:active,
input[type="range"]::-moz-focus-inner,
input[type="range"]::-moz-focus-outer {
border: 0;
outline: none;
}
input[type="range"]::-moz-range-thumb {
border: none;
height: 50px;
width: 50px;
background-color: transparent;
background-image: url("storage.googleapis.com
");
background-position: 0 0;
background-size: cover;
transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
cursor: pointer;
}
input[type="range"]::-moz-range-thumb:active {
background-position: 100% 0px;
transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 20px;
background: #eee;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
cursor: pointer;
}
input[type="range"]::-moz-range-progress {
height: 20px;
background: #4685d7;
border-radius: 10px;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
border: none;
height: 50px;
width: 50px;
background-color: transparent;
background-image: url("storage.googleapis.com");
background-position: 0 0;
background-size: cover;
transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
cursor: pointer;
margin-top: -15px;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb:active {
background-position: 100% 0px;
transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 20px;
background: #eee;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
cursor: pointer;
-webkit-appearance: none;
}
label {
background: #eee;
border-radius: 50%;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
padding: 14px;
margin-left: 10px;
font-family: Roboto, 'Helvetica Neue', Arial;
font-size: 20px;
width: 25px;
text-align: center;
color: #2968bb;
font-weight: bold;
content: '';
}
.twitter-link {
position: absolute;
bottom: 4px;
margin: auto;
font-family: sans-serif;
font-size: 12px;
color: rgba(0,0,0,0.6);
}
//index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="slider" name="slider" type="range" value=0>
<label for="slider">0</label>
<a class="twitter-link" href="twitter.com" target="_blank" >by @phil_osophie</a>
</body>
<script src="script.js"></script>
</html>
// Style.css
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #a9cbee;
}
input[type="range"] {
-webkit-appearance: none;
background: transparent;
width: 90%;
max-width: 500px;
outline: none;
}
input[type="range"]:focus,
input[type="range"]:active,
input[type="range"]::-moz-focus-inner,
input[type="range"]::-moz-focus-outer {
border: 0;
outline: none;
}
input[type="range"]::-moz-range-thumb {
border: none;
height: 50px;
width: 50px;
background-color: transparent;
background-image: url("storage.googleapis.com
");background-position: 0 0;
background-size: cover;
transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
cursor: pointer;
}
input[type="range"]::-moz-range-thumb:active {
background-position: 100% 0px;
transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 20px;
background: #eee;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
cursor: pointer;
}
input[type="range"]::-moz-range-progress {
height: 20px;
background: #4685d7;
border-radius: 10px;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
border: none;
height: 50px;
width: 50px;
background-color: transparent;
background-image: url("storage.googleapis.com
");background-position: 0 0;
background-size: cover;
transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
cursor: pointer;
margin-top: -15px;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb:active {
background-position: 100% 0px;
transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 20px;
background: #eee;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
cursor: pointer;
-webkit-appearance: none;
}
label {
background: #eee;
border-radius: 50%;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
padding: 14px;
margin-left: 10px;
font-family: Roboto, 'Helvetica Neue', Arial;
font-size: 20px;
width: 25px;
text-align: center;
color: #2968bb;
font-weight: bold;
content: '';
}
.twitter-link {
position: absolute;
bottom: 4px;
margin: auto;
font-family: sans-serif;
font-size: 12px;
color: rgba(0,0,0,0.6);
}
- oz suser
(12.08.20 12:51:34)
Teşekkür ederim. Ben de aynı şekilde yapmama rağmen olmayınca hobi düzeyindeki kodcu yanımı sorguladım. Meğerse ayarlardan compiled ı seçmek gerekiyormuş ama madem geliştirici düzeyinde bir panel burası, dümdüz paylaş ver gitsin. ne seçtittitiriyorsun. :)
- TATLIEKŞİ
(12.08.20 15:55:23)
1
