Непрозрачный текст в прозрачном блоке
Вторник, Январь 6, 2009 20:39Рубрики: Web-developer, web-design
(Нажмите, чтобы увеличить)
Блуждая по форумам и блогам, частенько натыкаюсь на проблему: люди ищут решение проблемы, как сделатть непрозрачный текст в прозрачном блоке с закругленными краями на CSS?
Программисты предлогают использовать JavaScript, верстальщики предлагаю безумные решения. *Я не говорю о всех*. Я решил написать для вас всего пару строчек, который работает, и без лишних наворотов, которые совсем не нужны.
Итак... В начале делаем блок с закругленными краями, правда это рабоет только в FF, а в остальных закругленных углов не будет.
HTML:
<div class="rightcolumn"> <div class="transparency"></div> Здесь идет текст</div>
CSS:
.rightcolumn {
position:relative;
top: 80px;
right: 30px;
padding:30px;
width:600px;
color:#000;
float:right;
overflow:hidden;
}
.rightcolumn .transparency {
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#fff;
width:660px;
height:2500px;
position:absolute;
top:0px;
left:0px;
border: 1px solid #9E5C28;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
position:relative;
top: 80px;
right: 30px;
padding:30px;
width:600px;
color:#000;
float:right;
overflow:hidden;
}
.rightcolumn .transparency {
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#fff;
width:660px;
height:2500px;
position:absolute;
top:0px;
left:0px;
border: 1px solid #9E5C28;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
Теперь, добавляем класс (например .cont), в котором будет текст.
HTML:
<div class="rightcolumn">
<div class="transparency"> </div>
<div class="cont">Здесь идет текст</div>
</div>
<div class="transparency"> </div>
<div class="cont">Здесь идет текст</div>
</div>
CSS:
.cont{ position:relative; }
Все работает. А в мозиле даже и закругленные углы есть 
Пример виден на верхней фото, нажмите чтобы увеличить!
Вы можете следить за любыми ответами на эту запись через RSS 2.0 feed.
Вы можете оставить ответ, или trackback с Вашего собственного сайта.
Loading ...
Алла Дин сообщил:
Январь 12th, 2009 19:31
спасибо, все прекрасно видно
Богдан сообщил:
Январь 18th, 2009 15:51
спасибо. хотя закругленные углы не получились
WebMast сообщил:
Январь 18th, 2009 16:19
Закругленный углы работают только в FF (Мозила).
Сфинкс сообщил:
Май 5th, 2009 16:47
Здорово, надо попрактиковаться.
Sergio сообщил:
Июль 2nd, 2010 13:23
Замороченный код CSS.
Зачем два раза разные параметры присваивать для .rightcolumn?
Sergio сообщил:
Июль 2nd, 2010 13:29
вопрос снимается, пылинку за запятую принял... тополинный пух...жара...июнь