Jump to content
  • 0

Прозрачный угол для каринки


92ave
 Share

Question

Сейчас создаю дизайн, задумался смогу ли я это реализвать.

Есть объект, он статической высоты стической ширины, вот его фрагмент:

UWWT4r2b.jpg

Красным выделена своеобразная рамка, в правой части будет текст поэтому там опросов особо то и нету.

А что касается картинки, я хочу сделать так, чтобы пользователь заморачивался лишь о высоте картинки и ни в коем случае вручную не обрезал уголки.

Тоесть как сделать посредством css и html так, чтобы картинка в div с определенным классом сама себе обрезала уголки в нужном месте?

Например вот этак картинка:

TMZEGfSn.jpg

Нужно чтобы когда её вставили в ДИВ получилось вот так:

2FnJaov5.jpg

На что способен я, вы можете видеть в первом изображении.

Идеи:

Текст будет на фоне каком-то, следовательно можно ЛЕВЫЙ угол картинки затмить этим самым фоном текста, но с правым углом не проканает... потомучто фон самого сайта он не монохромный...

Link to comment
Share on other sites

Recommended Posts

  • 0
Сейчас Макс тебе посоветует вырезать отверстие и подложить картинки под бг.

Если я правильно понял, что мне сейчас посоветуют, то заранее вопрос: как я отверстие это прорублю? мне фон справа нельзя затмевать тот фон где темносиние кругляшки, они по всему фону в разнобой, а блоков с таим треугольников вовсе не один будет, так что я впринцепи не могу вырезать отвертсие

Link to comment
Share on other sites

  • 0
Если я правильно понял, что мне сейчас посоветуют, то заранее вопрос: как я отверстие это прорублю? мне фон справа нельзя затмевать тот фон где темносиние кругляшки, они по всему фону в разнобой, а блоков с таим треугольников вовсе не один будет, так что я впринцепи не могу вырезать отвертсие

Придётся бордер такой вот треугольный класть картинкой сверху на фон, мотоцикла. А на всё это уже сверху другой слой с чем угодно.

Link to comment
Share on other sites

  • 0
как же?

в эпоху css3?

про rotation забыли? :)

Светка, а всё равно во-первых это заморочка, уж лучше отказаться правда. А потом ведь ИЕ8 так же в обломе, а тут смысла нет. Но если ты сделаешь пример, я был бы не против :)

Link to comment
Share on other sites

  • 0

Насколько я понял, проблема именно в необходимости показывать треугольный огрызок картинки на произвольном месте заранее неизвестного фона. Иначе задача и впрямь тривиально решается наложением маски с дыркой...

Link to comment
Share on other sites

  • 0
Светка, а всё равно во-первых это заморочка

заморочка, да.

уж лучше отказаться правда

если можно что-то не делать, то этого делать не следует.

хм… где-то я такое уже слышала.

А потом ведь ИЕ8 так же в обломе, а тут смысла нет. Но если ты сделаешь пример, я был бы не против :)

сделать можно.

msdn рулит.

Но лениииииво!

Link to comment
Share on other sites

  • 0

Эм ну у меня обрезались ))

Примерно что-то такое получилось, с непонятными подгонами.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html,body {
margin: 20px;
}
#rotate {
border: 1px solid olive;
width: 200x;
height: 200px;
overflow: hidden;

}
#image {
width: 200px;
height: 200px;
margin: 100px 0 0 50px;
border: 1px solid #000;
overflow: hidden;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#image img {
width: 300px;
height: 200px;
margin: -60px 0 0 -110px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(45deg);
}


/*]]>*/
</style>
</head>

<body>
<div id="rotate">
<div id="image"><img src="images/slaydshou/1.jpg" /></div>
</div>
</body>

</html>

Link to comment
Share on other sites

  • 0
прикрыть часть картинки повёрнутым под углом блоком.

Свет, респект и уважуха :)

проверяйте http://zalil.ru/30596760

До кроссбраузерности нужно допилить, но тем не менее...

Я конечно применил jQuery, но как по мне результат того стоил ))

Чет поспешил выложить. Использование jQuery поидее должно было обеспечить кросс, но чтото оно в ие6-8 вообще не в ту степь (((

Буду разбираться

Link to comment
Share on other sites

  • 0

ну вобщем вот http://zalil.ru/30596875

ие6-8 идут лесом ((

Ну неможет летать рожденный ползать

А может кто придумает чего?

и как можно записать такое вот покороче?

figure {
width: 100%;
height: 100%;
overflow: hidden;
display: block;


transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform-origin: -16px 226px;
-moz-transform-origin: -16px 226px;
-o-transform-origin: -16px 226px;
-webkit-transform-origin: -16px 226px;
}

Link to comment
Share on other sites

  • 0

Вот пожалуйста: http://serlutin.nxt.ru/example/triangle.html

IE6-7 идут лесом, либо оборачиваем в ещё два контейнера.

Выглядит коряво, так как лень, выравнивать. Возможно нужно задать ещё отступы картинке, либо обернуть в ещё одни контейнер. Однако задачу топикстартера это не решает, к сожалению.

Link to comment
Share on other sites

  • 0
ие6-8 идут лесом ((

да нет же…

могут они.

По крайней мере должны мочь.

эх, вот времени сейчас не шибко много.

Если не забуду, через два-три дня сделаю.

Но суть именно та. И развить эту идею можно ещё как угодно.

Link to comment
Share on other sites

  • 0

ну вобщем вот что получил: http://zalil.ru/30599214

ие6-7 норм работает, только я не совсем понял как рассчитывать отступы, поэтому подбирал.

ие8 - отказывается напрочь нормально работать. Уже и в режим эмуляции ие7 его переводил (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />) - никак, и доктайп XHTML Strict ставил :( ( и стекло протирал, и по колесу стучал :) )

Вот если в браузере кликнуть на режим отображения ие7 - то правильно ведет себя.

Кто ие8 победит?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy