Стильные рамки (блоки)

Недавно заинтересовалась CSS (Cascading Style Sheets) — каскадные таблицы стилей.
Можно ли, не будучи , научиться разбираться в этом сложном наборе
параметров? Для чего? Ну, хотя бы для того, чтобы с помощью языка CSS создавать
блоки (рамочки), где будут размещаться текст, картинки или что нашей душе угодно.
Поэкспериментировала с кодами и получила вот такие стильные, лёгкие блоки.

Под каждым стоит его код. Можно менять размер (атрибут width: 650px), цвет фона,
обводок, чтобы получить разные по цветовому исполнению блоки.
Обозначение цвета: #ABEDF7, просто оставляем решётку #, убираем ABEDF7,
и ставим свой цвет.

Здесь будет ваш текст

Ваша подпись

<center><div style="#shed_left; padding: 20px; width: 650px; background: #C3FEAA; border-radius: 12px; box-shadow: 4px 4px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #66CC00; padding:10px; background: #FBFFAC; border-radius: 12px; boxShadow 11: width: 80%; max-width:; margin: 0em auto; padding: 1em; box-shadow: 0 4px 4px #575555 inset;"><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст<br /> <br /> </i></span><center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></div></center>

Смотрим дальше

Flash материал.40(3)

Лучики, анимация, ФШ.



Результат урока:



Создаем рабочее окошко - 1000 пик на 1000 пик., ставим содержание фона - Прозрачный.
>>>>>>>>>>>>>>>>

Интересные символы


Есть интересные символы, которые можно набрать на клавиатуре, но чтобы не морочить себе голову, можете их просто склпировать и вставить в пост.
Кстати говоря, вы можете менять их цвет и размер, как и любого текста.
☂ ❅ ☭ ♈ ❺

---

Символы — цифры:
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ — ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ — ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿

---

Символы — Знаки Зодиака:
(размер поставила +4)
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

---

Символы — цветов и снежинок:
+4
✽ ✾ ✿ ❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋

---

Символы — Нотные знаки
+6
♩ ♪ ♫ ♬ ♭ ♮ ♯

---

Символы — Шахматы
+4
♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟

---

Символы — Карточные масти
+4
♠ ♣ ♥ ♦ -=изменим цвет=- ♠ ♣ ♥ ♦

---

Разные символы:
+3
ツ ๏ ͡ ̯ ๏ ღ ஐ ₪ ఋ இ の Ѡ ☭ ✖ ☂ ☃ ★ ☆
卍 卐 ☪ ☠ ☯ ☮ ✇ ☤

---

И ещё:
+5
✐ ✑ ✒ ✎ ✍ ✄ ✂ ✉ ❥ ❍ ❒ ✡ ✗ ■ ○ ☐ ☑ ☒ ✓ ✔ ☼ ☪ ☽ ☾ ☎ ☏

---

Символы — стрелки:
+3, жирный
↔ ↕ ← ↖ ↑ ↗ → ↘ ↓ ↙ ˿ ≪ ↨ ⇦ ⇧ ⇨ ⇩ ⇐ ⇑ ⇒⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ↺ ↻ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ￩ ￪ ￫ ￬ ➜ ➝ ➞ ➟ ➡ ➥ ➦ ➨ ➩ ➪ ➯ ➱ ➲ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≲ ≳

---

ПРОСТЫЕ РАМОЧКИ и ШРИФТ

Увидала в цитате примеры простых рамочек с каким-то диким, совершенно неудобоваримым кодом, да ещё и внизу рамочки ссылка на "дизайнера" (?!! )
Не будем называть имён )
А между тем, всё намного проще и рамочку можно склепать за одну минуту, пользуясь очень простым кодом!

ВАШ ТЕКСТ Рамочка раздвигается сама по ширине текста

РАМОЧКА С ЗАДАННОЙ ШИРИНОЙ (по вертикали она сама раздвинется)

В эти же рамочки можете вставлять картинки, плеер, видео.

_для тех, кто хочет научиться_
_коды, о шрифтах_

Ещё "Простые рамочки" ТУТ

Текстовые теги на Ли.Ру

Текстовые теги на Ли.Ру

Текст с отступом от края в 8 пробелов
<blockquote>ВАШ ТЕКСТ</blockquote>

Если хочешь быть здоров - похмеляйся!
Дома бегай без трусов - не стесняйся!

Абзац - редкая практика в инете
<p style="text-indent: 40px">ВАШ ТЕКСТ</p>

Не пытайтесь спорить с дебилом,
иначе Вы опуститесь до его уровня,
где он Вас задавит своим опытом!

Текст справа в несколько строк
с выравниванием СПРАВА
<div align=right>ВАШ ТЕКСТ</div>

Меняю срочно
злобу дня на радость ночи!

Текст справа в несколько строк
с выравниванием СЛЕВА
<div style="float:right;">ВАШ ТЕКСТ</div><br clear="all" />

Искусство жить состоит в том,
чтобы на всякое злое "р-р-р-"
уметь ответить вежливое "ГАВ!"

Бегущая влево строка (и/или картинка!)
<marquee>ВАШ ТЕКСТ</marquee>
бегущая влево строка


Бегущая вправо строка (и/или картинка!)
<marquee direction="right">ВАШ ТЕКСТ</marquee>
бегущая вправо строка


Бегущая от края к краю строка (и/или картинка!)
<marquee behavior="alternate">ВАШ ТЕКСТ</marquee>
бегущая от края к краю строка


Скользящий вверх текст
<marquee direction="up" scrollamount="1" scrolldelay="0" height="45">ВАШ ТЕКСТ</marquee>

скользящий вверх текст с информацией
или, например, смайлик



Скользящий вниз текст
<marquee direction="down" scrollamount="1" scrolldelay="0" height="45">ВАШ ТЕКСТ</marquee>


текст со всякой ерундой )
текст с информацией
скользящий вниз текст


Сноска сверху (удобно для показателя степени)
ТЕКСТ^сноска ТЕКСТ ^сноска - 120 см²


Сноска снизу (индекс)
ТЕКСТ_сноска ТЕКСТ _сноска - АВ₁₂


Список - жирная точка спереди
<ul><br /> <li>ВАШ ТЕКСТ<br /> </li><li>ВАШ ТЕКСТ<br /> </li></ul>

• Это Вам не гифы по сайтам тырить!
  
• Кто юзал мой логин и весь его выюзал?!
  

Автоматическое формирование списка по пунктам
<ol><br /> <li> Один из пунктов несортированного списка<br /> <li> Другой такой пункт<br /> </ol>

1. Я всегда права!
   
2. Если я не права, то см. п.1
   

"Закрепить" текст так, как вы его напишите
<pre>ВАШ ТЕКСТ</pre>

Каждый

      пишет так,

            как ему нравится!

Текст со всплывающей подсказкой
<acronym title="то, что вы пишете во всплывающей подсказке">ВАШ ТЕКСТ</acronym>

Хотите увидать подсказку? - наведите мышкой на это предложение -
всплывет подсказочка.

Пишем ТЕКСТ В ДВА СТОЛБЦА

ТЕКСТ В ДВА СТОЛБЦА
ЕСТЬ ФОРМУЛА:
<table width="100%"><tr><td width="50%">текст левой колонки<td width="50%">текст правой колонки</td></td></tr></table>

Главное, текст поставить, чтобы ровно лёг, между таким:
<div style="font: 20px Georgia; padding: 0px;"> ТЕКСТ </div>
где можно менять размер текста - цифра 20 (больше/меньше)
и вид шрифта: - Georgia - меняй, как хочешь:
Arial, Garamond, Cambria, Tahoma, Verbana, times new roman, courier new, century gothic
... и т.д., вообще шрифтов навалом .

Общий вид такой рамки будет:
<table width="100%"><tr><td width="50%"><div style="font: 20px Georgia; padding: 0px;"> 1 колонка</div><td width="50%"> <div style="font: 20px Georgia; padding: 0px;"> 2 колонка </div></td></td></tr></table>

---

пример
Алексей Апухтин

Ни отзыва, ни слова, ни привета, Пустынею меж нами мир лежит, И мысль моя с вопросом без ответа Испуганно над сердцем тяготит!

Ужель среди часов тоски и гнева Прошедшее исчезнет без следа, Как лёгкий звук забытого напева, Как в мрак ночной упавшая звезда?

---

В примере заменила размер шрифта с 20 на 22, но можно заменить ширину рамки
со 100% в самом начале кода на 90-95 (надо смотреть и подгонять)

---

Ещё кое-что про плееры с сайта Простоплеер

Урок фотошопа "Мягкое" вырезание объекта»

 

Урок далее....

Я так делаю анимацию исчезающего изображения...

Я так делаю анимацию исчезающего изображения... Урока нет,вот для себя записала,как мне объяснили! Если кому понравится и пригодится-буду рада. Все получается быстро и просто... -------------------------------------------------------- Когда работа готова ,объединять слои не надо... 1- выделить слой с картинкой, на 1ом кадре в анимации поставить время 0,1 секунда сделать дубль кадра(в анимации)-все глазки открыты. 2- выделить 2-ой кадр(там-же в анимации,который создали) и закрыть глазок на картинке (которая будет исчезать) 3- вернуться на 1 кадр в анимации и добавить 10 промежутоочных кадров(можно и 20 кадров сделать, будет плавнее анимация,но и "тяжелее"... Выбирайте ,что захотите.) 4- выделить последний (12 ый кадр в анимации) , создать его дубль и открыть глазок на картинке. 5 -вернуться на предпоследний кадр и добавить к нему еще 10 промежуточных... Все-проверяйте ...если результат устраивает выделите 1кадр и поставь время задежки 1-2 сек (сколько хотите.., чтобы картинка какое-то время не исчезала) Надеюсь доходчиво написала-сама по этой записи делаю. С уважением Аня.

Selesta