<iframe width="560" height="315" src="https://www.youtube.com/embed/NqFBM_Z8CHM?list=PL95FYQzUoZQrVCDVg1IovgaUkoUW_QtzS" frameborder="0" allowfullscreen></iframe> <img src="https://s-media-cache-ak0.pinimg.com/736x/52/e5/71/52e571b2f53b424a443d675bab98023a.jpg" style="float:left;height:315px;width:auto;"/> <iframe width="550" height="315" src="https://www.youtube.com/embed/iMyo8I8AKmY?list=PL95FYQzUoZQrVCDVg1IovgaUkoUW_QtzS" frameborder="0" allowfullscreen></iframe> <img src="http://www.kto-takoy.ru/wp-content/uploads/2010/01/ermine.jpg" style="float:left;height:310px;width:auto;"/> |
|
|
<style>
#bublik + iframe{
transition: all 0.8s ease;
}
#bublik{float:left;background-color:black;color:white;border:2px groove #777;box-shadow:1px 1px 1px 1px #333;}
#bublik:hover + iframe,#bublik:active + iframe,#bublik:focus + iframe{
width: 700px;
height: 380px;
}
</style>
<button id="bublik">з<br>у<br>м</button>
<iframe style="display:block;margin:0 auto;" width="560" height="315" src="https://www.youtube.com/embed/QP9ADVz5uPM" frameborder="0" allowfullscreen></iframe>
|
join, когда логику пихаешь в разметку, а именно с разметкой связан селектор +, то это ужасно)). я понимаю, это шутка, но некоторые всерьез думают что css так развился так развился что скоро там программировать можно будет.
|
Mаxmaxmаximus,
Макс, вот не соглашусь с тобой =). Поиск соседнего селектора плюсиком, тильдой, 'значком больше', был еще в далеких css2 or css1, но ишак их игнорил, поэтому фишки css не применялись почти , не кросcбраузерно. Сейчас можно все, особенно если это оформительские фишки и к логике проекта оношения не имеют. |
<style>#post_message_404038 .lines{height:100px!important;overflow:hidden;}#maximus{position:relative;top:2em;left: 1em;outline:12px solid rgba(76, 175, 80, 0.66);display:inline-block;width:70px;height:70px;margin-left: 0.4cm;border:2px solid white;border-radius:50%;box-shadow:0px 0px 5px 0px #0069FF,inset 0px 0px 30px 2px #0CF;outline-offset:2px;outline-style: double;}#chik{cursor:pointer;position:absolute;top:0;left:0;height:100%;width:100%;display:block;opacity:0;z-index:4;}#toggleHighli{background-color:#e9e9e9;cursor:pointer;overflow:hidden;position:absolute;display:block;left:11px;top:11px;z-index:0;height:48px;width:48px;border-radius:50%;box-shadow:0px 0px 0px 0px #e9e9e9 inset,0px -28px 0px 0px #333 inset;transform:perspective(144px) rotate3d(1, 1, 0, 36deg);transition:all 0.3s ease-out 0s;}
#toggleHighli span{background-color:#e9e9e9;content:"";display:inline-block;height:12px;width:12px;position:absolute;top:22px;transition:all 0.3s ease-out 0s;}#toggleHighli span:first-child{left:8px;border-radius:0px 100%;}#toggleHighli span:last-child{right:8px;border-radius:100% 0px;}#chik:checked + #toggleHighli{background-color:#F7CD25;text-align:center;transform:rotate(0deg);box-shadow:0px 6px 0px 0px #333 inset,0px 12px 0px 0px #F00 inset;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}#chik:checked + #toggleHighli span{background-color:#000;border-style:solid;border-width:0px;display:inline-block;height:5px;width:5px;border-radius:4px;top:40%;position:relative;}#chik:checked + #toggleHighli span:first-child{border-color:transparent #333 #333 transparent;left:auto;-webkit-box-shadow:4px 5px 0px 2px #F7CD25, 4px 7px 0px 1px #333;-moz-box-shadow:4px 5px 0px 2px #F7CD25, 4px 7px 0px 1px #333;box-shadow:4px 5px 0px 2px #F7CD25, 4px 7px 0px 1px #333;}#chik:checked + #toggleHighli span:last-child{right:auto;border-color:#333 transparent transparent #333;margin-left:2px;}#maximus p{position:absolute;left:-10px;right:-10px;display:block;font:normal 600 16px/16px monospace, sans-serif, serif;color:#005A04;text-align:center;border:1px solid rgb(137, 202, 139);background-color:#61B864;box-shadow:inset 0px 7px 8px 0px #fff;}
#maximus p:nth-of-type(1){border-radius:6px 6px 0 0;top:-34px;}#maximus p:nth-of-type(2){border-radius:0 0 6px 6px;bottom:-34px;}</style>
<section id="maximus"><p>maximum</p><input type="checkbox" id="chik"/><div id="toggleHighli" class="trans04 fire"><span></span><span></span></div><p>to relax</p></section><iframe style="float:right;padding-right:2em;" width="560" height="315" src="https://www.youtube.com/embed/wsU5GD9nrkI" frameborder="0" allowfullscreen></iframe>
|
Цитата:
логика ответственная за отображение тоже должна описываться в яваскрипте, например что если ты захочешь при наведении еще и увеличить предыдущий элемент? а если захочешь установить ему ширину равной сумме ширине двух других блоков? твоя ошибка в том что ты не знал что у компонентов есть 3 вещи, разметка оформление и логика, и что есть бизнес логика. то есть логика компонента ответственная за отображение этого компонента это тоже логика и описывается она как любая логика в яваскрипте. теперь я исправил эту твою ошибку в понимании). понял в чем была ошибка? |
Цитата:
|
есть компоненты. это такие как бы виджеты. прямоугольнички на сайте. они состоят из логики компонента, html компонента, и css компоннета.
логика компонента делится на 2 логики. логика бизнес логика, и логика отечающая за то как там css свойства меняться будут чтобы изображение менялось. одна логика называется контроллер, другая вью. ваш кэп. тут же вью логику пытаются написать на css |
| Часовой пояс GMT +3, время: 03:19. |