Секретный Сервис Lамастера. CSS 3

" Здесь CSS магическая сила,
Откроет вам возможности свои.
Приобрести поможет золотую середину,
И нужный вам для сайта наворот найти... "

Категория: Открытый КОД Lамастер

Исходники CSS -ов... для оформления

Открытый КОД:

26/10/2025 22:42

Код CSS 1 - Образец ( №1 ):

7 цветов радуги:

Школьная запоминалка :

КаждыйRED
(КРАСНЫЙ)
ОхотникORANGE
(ОРАНЖЕВЫЙ)
ЖелаетYELLOW
(ЖЕЛТЫЙ)
ЗнатьGREEN
(ЗЕЛЁНЫЙ)
ГдеBLUE
(ГОЛУБОЙ)
СидитNAVY
(СИНИЙ)
ФазанVIOLET
(ФИОЛЕТОВЫЙ)

Скачать CSS ( ZIP ) ≈ 8kb

 <HEAD> <style> /* ------- 9 farben tooltip-------- */ .textPanel {width:700px; margin:20px 0; font-family:'georgia', serif; padding:25px; background:#eee;} .textPanel img {float:left; padding:0 10px 10px 0;} span.tooltip {padding:0 5px; background:transparent; cursor:default; z-index:100;} span.tooltip > span {display:none; position:absolute; border:2px solid #080; background:#fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.7); z-index:100;} span.bottomRight > span {border-radius:0 20px 0 20px; left:50%; top:40px;} span.bottomLeft > span {border-radius:20px 0 20px 0; right:50%; top:40px;} span.topRight > span {border-radius:20px 0 20px 0; left:50%; bottom:40px;} span.topLeft > span {border-radius:0 20px 0 20px; right:50%; bottom:40px;} span.colRed > span {border-color:#c00;} span.colBlue > span {border-color:#008;} span.colNavy > span {border-color:#000033;} span.colBrown > span {border-color:#830;} span.colOrange > span {border-color:#ff6600;} span.colGreen > span {border-color:#080;} span.colGray > span {border-color:#888;} span.colViolet > span {border-color:#606;} span.colYellow > span {border-color:#FF0;} span.tooltip span b {display:block; background:#080; *width:100%; margin:2px; padding:10px; color:#222; position:relative; z-index:100; overflow:hidden; font:normal 14px/20px 'georgia', serif; box-shadow:inset 2px 2px 5px rgba(255, 255, 255, 0.5), inset -2px -2px 5px rgba(0, 0, 0, 0.5); } span.bottomRight span b {border-radius:0 18px 0 18px;} span.bottomLeft span b {border-radius:18px 0 18px 0} span.topRight span b {border-radius:18px 0 18px 0;} span.topLeft span b {border-radius:0 18px 0 18px;} span.colRed span b {background:#C00;} span.colBlue span b {background:#008;} span.colNavy span b {background:#000033;} span.colBrown span b {background:#830;} span.colOrange span b {background:#ff6600;} span.colGreen span b {background:#0F0;} span.colGray span b {background:#888;} span.colViolet span b {background:#646;} span.colYellow > span b {background:#FF0;} span.tooltip > span:before {display:block; content:""; width:20px; height:20px; background:transparent; position:absolute;} span.bottomRight > span:before {top:-20px; left:-2px;} span.bottomRight.colRed > span:before {background:url(red-corner.png) no-repeat -20px 0;} span.bottomRight.colBlue > span:before {background:url(blue-corner.png) no-repeat -20px 0;} span.bottomRight.colNavy > span:before {background:url(navy-corner.png) no-repeat -20px 0;} span.bottomRight.colBrown > span:before {background:url(brown-corner.png) no-repeat -20px 0;} span.bottomRight.colOrange > span:before {background:url(orange-corner.png) no-repeat -20px 0;} span.bottomRight.colGreen > span:before {background:url(green-corner.png) no-repeat -20px 0;} span.bottomRight.colGray > span:before {background:url(gray-corner.png) no-repeat -20px 0;} span.bottomRight.colViolet > span:before {background:url(violet-corner.png) no-repeat -20px 0;} span.bottomRight.colYellow > span:before {background:url(yellow-corner.png) no-repeat -20px 0;} span.bottomLeft > span:before {top:-20px; right:-2px;} span.bottomLeft.colRed > span:before {background:url(red-corner.png) no-repeat 0 0;} span.bottomLeft.colBlue > span:before {background:url(blue-corner.png) no-repeat 0 0;} span.bottomLeft.colNavy > span:before {background:url(navy-corner.png) no-repeat 0 0;} span.bottomLeft.colBrown > span:before {background:url(brown-corner.png) no-repeat 0 0;} span.bottomLeft.colOrange > span:before {background:url(orange-corner.png) no-repeat 0 0;} span.bottomLeft.colGreen > span:before {background:url(green-corner.png) no-repeat 0 0;} span.bottomLeft.colGray > span:before {background:url(gray-corner.png) no-repeat 0 0;} span.bottomLeft.colViolet > span:before {background:url(violet-corner.png) no-repeat 0 0;} span.bottomLeft.colYellow > span:before {background:url(yellow-corner.png) no-repeat 0 0;} span.topRight > span:before {bottom:-20px; left:-2px;} span.topRight.colRed > span:before {background:url(red-corner.png) no-repeat -20px -20px;} span.topRight.colBlue > span:before {background:url(blue-corner.png) no-repeat -20px -20px;} span.topRight.colNavy > span:before {background:url(navy-corner.png) no-repeat -20px -20px;} span.topRight.colBrown > span:before {background:url(brown-corner.png) no-repeat -20px -20px;} span.topRight.colOrange > span:before {background:url(orange-corner.png) no-repeat -20px -20px;} span.topRight.colGreen > span:before {background:url(green-corner.png) no-repeat -20px -20px;} span.topRight.colGray > span:before {background:url(gray-corner.png) no-repeat -20px -20px;} span.topRight.colViolet > span:before {background:url(violet-corner.png) no-repeat -20px -20px;} span.topRight.colYellow > span:before {background:url(yellow-corner.png) no-repeat -20px -20px;} span.topLeft > span:before {bottom:-20px; right:-2px; border-width:0 2px 0 0;} span.topLeft.colRed > span:before {background:url(red-corner.png) no-repeat 0 -20px;} span.topLeft.colBlue > span:before {background:url(blue-corner.png) no-repeat 0 -20px ;} span.topLeft.colNavy > span:before {background:url(navy-corner.png) no-repeat 0 -20px ;} span.topLeft.colBrown > span:before {background:url(brown-corner.png) no-repeat 0 -20px ;} span.topLeft.colOrange > span:before {background:url(orange-corner.png) no-repeat 0 -20px ;} span.topLeft.colGreen > span:before {background:url(green-corner.png) no-repeat 0 -20px;} span.topLeft.colGray > span:before {background:url(gray-corner.png) no-repeat 0 -20px;} span.topLeft.colViolet > span:before {background:url(violet-corner.png) no-repeat 0 -20px;} span.topLeft.colYellow > span:before {background:url(yellow-corner.png) no-repeat 0 -20px;} span.colRed > span:before {border-color:#C00;} span.colBlue > span:before {border-color:#008;} span.colNavy > span:before {border-color:#000033;} span.colBrown > span:before {border-color:#850;} span.colOrange > span:before {border-color:#ff6600;} span.colGreen > span:before {border-color:#080;} span.colGray > span:before {border-color:#888;} span.colViolet > span:before {border-color:#606;} span.colYellow > span:before {border-color:#FF0;} span.tooltip span b:before {display:block; content:""; width:80%; height:50px; background:transparent; border-radius: 100% / 50px ; position:absolute; left:10%; top:-30px; z-index:200; background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); } span.tooltip:hover {position:relative; z-index:100;} span.tooltip:hover > span {display:block; white-space:nowrap;} span.tooltip + img.close {position:fixed; left:0; top:0; width:0; height:0; z-index:99;} span.tooltip:hover + img.close {width:100%; height:100%;} /* ------- end 9 farben tooltip -------- */ </style> </HEAD> <body> <center> <div class="error2"> <h2>7 цветов радуги:</h2> Школьная запоминалка :</div> КаждыйRED (КРАСНЫЙ) ОхотникORANGE (ОРАНЖЕВЫЙ) ЖелаетYELLOW (ЖЕЛТЫЙ) ЗнатьGREEN (ЗЕЛЁНЫЙ) ГдеBLUE (ГОЛУБОЙ) СидитNAVY (СИНИЙ) ФазанVIOLET (ФИОЛЕТОВЫЙ) </center> </body>

Все скрипты предоставлены исключительно для ознакомления.

Прекрасно работают в Mozilla FireFox и Google Chrom

Lаmaster

Дата: /

Открытый КОД:

Код CSS 1 - Образец ( №1 ):

7 цветов радуги:

Все скрипты предоставлены исключительно для ознакомления.

Прекрасно работают в Mozilla FireFox и Google Chrom