Тут можно задовать вопросы по HTML, CSS, JavaScript
Тут можно задовать вопросы по HTML, CSS, JavaScript
Страница: 1
Сообщений 1 страница 7 из 7
Поделиться1Сб, 25 Июл 2020 07:58:04
- Модератор
- Приглашений: 0
- Сообщений: 785
- Уважение: [+1/-0]
- Позитив: [+8/-11]
- Пол: Мужской
- Последний визит:
Пн, 29 Апр 2024 00:45:57
Поделиться2Сб, 25 Июл 2020 08:03:48
Как повернуть стрелку на 90 градусов, в html, css? Есть стрелка спидометра, нужно стрелку повернуть на 90, и чтобы поварачивалась не середина стрелки, а нижний конец.
Поделиться3Вс, 26 Июл 2020 04:35:14
- Модератор
- Приглашений: 0
- Сообщений: 785
- Уважение: [+1/-0]
- Позитив: [+8/-11]
- Пол: Мужской
- Последний визит:
Пн, 29 Апр 2024 00:45:57
Изображение можно поварачивать спомощью css функции transform:rotate(90deg), а спомощью css свойства transform-origin устанавливается точка, точка откуда поворачивать.
Пример со стрелкой:
Код:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color:#333; }
#tahometer { transform-origin: -100px 5px; transform:rotate(90deg); position:absolute; left:100px; top:100px; filter:drop-shadow(0px 0px 5px #d400ff); }
</style>
<script>
function rotate(g) {
var el = document.getElementById('tahometer');
el.style.transform = 'rotate(' + g + 'deg)';
}
window.onload = () => {
var i=0;
rotate(90);
/* setInterval( () => {
rotate(i);
i+=1;
}, 100);*/
}
</script>
</head>
<body>
<div id="tr" style="position:absolute; left:10px; top:250px; z-index:2;">x</div>
<div id="tahometer">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="180px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 15 69.9992">
<defs>
<style type="text/css">
<![CDATA[
.fil1 {fill:#1F1A17}
.fil0 {fill:#DD137B}
]]>
</style>
</defs>
<g id="Ebene_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<polygon class="fil0" points="6.18189,6.69567 6.70866,6.69567 7.28031,8.08937 7.28504,8.08937 7.28504,57.5669 5.60551,57.5669 5.60551,8.08937 5.61024,8.08937 "/>
<ellipse class="fil1" cx="6.4448" cy="50.6846" rx="3.09519" ry="3.03071"/>
</g>
</svg>
</div>
<input type="button" value="rotate" onclick="rotate(51);">
</body>
</html>Поделиться4Вс, 26 Июл 2020 04:45:16
Как сделать полупрозрачный div?
Поделиться5Вс, 26 Июл 2020 04:53:45
- Модератор
- Приглашений: 0
- Сообщений: 785
- Уважение: [+1/-0]
- Позитив: [+8/-11]
- Пол: Мужской
- Последний визит:
Пн, 29 Апр 2024 00:45:57
Полупрозрачный div можно сделать двумя способами, первый способ это спомощью свойства background-color, а второй способ это opacity, в background-color можно спомощью функции rgba сделать полупрозрачным только фон, opacity влияет и на внутринние элементы. Примеры:
Пример 1, только внешний div становится полупрозрачным:
Код:
<div style="background-color:rgba(0, 0, 0, 0.5); color:#fff;">
Я полупрозрачный div
<div>
Я не полупрозрачный div!
</div>
</div>
Пример 2, внешний и внутренний div становятся полупрозрачным:
Код:
<div style="background-color:#000; opacity:0.5; color:#fff;">
Я полупрозрачный div
<div>
Я тоже!
</div>
</div>Поделиться6Вс, 26 Июл 2020 17:28:38
Как сделать на css, чтобы картинка была круглая и с белой толстой рамкой?
Поделиться7Вс, 26 Июл 2020 17:39:41
- Модератор
- Приглашений: 0
- Сообщений: 785
- Уважение: [+1/-0]
- Позитив: [+8/-11]
- Пол: Мужской
- Последний визит:
Пн, 29 Апр 2024 00:45:57
Чтобы картинка была круглой нужно использовать border-radius, для рамки нужно использовать border.
Пример 1, картинка в фоне:
Код:
<div style="border:3px solid #fff; border-radius:100%; width:100px; height:100px; background-image:url(cat.jpg); background-position:-90px -5px; background-repeat:no-repeat; "></div>
Пример 2, использую тег img:
Код:
<img src="cat.jpg" style="border:3px solid #fff; border-radius:100%; width:100px; height:100px; ">
Страница: 1