В моем предыдущем посте мы создали 3D-текст в CSS3, используя несколько текстовых теней. Возможно, это было эффективно, но создание эффекта было утомительным методом проб и ошибок.
Мы собираемся сделать жизнь немного проще с плагином jQuery. Он будет выполнять тяжелую работу и генерировать скучный код CSS3, такой как:
text-shadow: -1px 1px 0 #ddd, -2px 2px 0 #c8c8c8, -3px 3px 0 #ccc, -4px 4px 0 #b8b8b8, -4px 4px 0 #bbb, 0px 1px 1px rgba(0,0,0,.4), 0px 2px 2px rgba(0,0,0,.3), -1px 3px 3px rgba(0,0,0,.2), -1px 5px 5px rgba(0,0,0,.1), -2px 8px 8px rgba(0,0,0,.1), -2px 13px 13px rgba(0,0,0,.1) ; Наш плагин jQuery использует JavaScript для применения стиля CSS3. Обычно вы избегаете этого, так как это будет медленнее, и без JavaScript пользователь не увидит эффекта.
Тем не менее, 3D вряд ли будет существенным, и плагин сэкономит значительное количество часов разработки. Если вы все еще чувствуете себя грязным, скопируйте сгенерированное свойство text-shadow из Firebug в ваш статический файл CSS.
Перейдите на демонстрационную страницу плагина, чтобы посмотреть примеры и скачать код.
Как использовать плагин
jQuery и плагин должны быть включены на вашу страницу — в идеале, перед закрывающим тегом </ body>, например
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="jquery.text3d.js"></script>
Чтобы применить 3D-эффект по умолчанию, установите класс «text3d» для любого элемента HTML, например
<p class="text3d">3D Text</p>
Кроме того, вы можете указать пользовательские 3D-эффекты для любого количества элементов в JavaScript, например
<script> $("#custom").text3d({ depth: 6, angle: 135, color: "#aaa", lighten: -0.1, shadowDepth: 30, shadowAngle: 45, shadowOpacity: 0.2 }); </script>
Где:
- глубина — это количество пикселей для трехмерного выдавливания
- угол — это угол выдавливания 3D, т.е. 90 — вертикально вниз
- цвет — это цвет экструзии 3D
- светлее — это разница в цвете между верхом и низом экструзии, например, -0,1 означает, что цвет потемнеет на 10%
- shadowDepth — приблизительное количество пикселей, на которые тень выходит из текста.
- shadowAngle — это угол падения тени
- shadowOpacity — начальная непрозрачность между 0 (без тени) и 1 (темно-черный). Обратите внимание, что несколько теней накладываются друг на друга, поэтому вам редко понадобится число больше 0,4.
Код плагина jQuery
Наш шаблон JavaScript будет знаком всем, кто написал или использовал плагин jQuery:
(function($) { // jQuery plugin definition $.fn.text3d = function(opts) { // default configuration var config = $.extend({}, { depth: 5, angle: 100, color: "#ddd", lighten: -0.15, shadowDepth: 10, shadowAngle: 80, shadowOpacity: 0.3 }, opts); // to radians config.angle = config.angle * Math.PI / 180; config.shadowAngle = config.shadowAngle * Math.PI / 180; // ... main code ... // initialization this.each(function() { TextShadow(this); }); return this; }; })(jQuery);
Объект config определяется набором свойств по умолчанию, которые могут быть переопределены. angle и shadowAngle предполагают градусы, поэтому они преобразуются в радианы. Каждый элемент HTML в селекторе jQuery передается в функцию TextShadow ()…
// create text shadow function TextShadow(e) { var s = "", i, f, x, y, c; // 3D effect for (i = 1; i <= config.depth; i++) { x = Math.round(Math.cos(config.angle) * i); y = Math.round(Math.sin(config.angle) * i); c = ColorLuminance(config.color, (i-1)/(config.depth-1)*config.lighten); s += x+"px "+y+"px 0 "+c+","; } // shadow for (f = 1, i = 1; f <= config.shadowDepth; i++) { f = f+i; x = Math.round(Math.cos(config.shadowAngle) * f); y = Math.round(Math.sin(config.shadowAngle) * f); c = config.shadowOpacity - ((config.shadowOpacity - 0.1) * i/config.shadowDepth); s += x+"px "+y+"px "+f+"px rgba(0,0,0,"+c+"),"; } e.style.textShadow = s.substr(0, s.length-1); }
Функция создает текстовую строку с использованием заданных параметров и применяет ее к текущему элементу. Обратите внимание, что 3D-экструзия цветов генерируется с помощью функции ColorLuminance () — для получения дополнительной информации обратитесь к разделу Как рассчитать более светлые или более темные шестнадцатеричные цвета в JavaScript .
Наконец, следующий код включен в конец нашего файла плагина, чтобы применить 3D-эффект по умолчанию ко всем элементам с классом «text3d».
jQuery(function() { jQuery(".text3d").text3d(); });
Я надеюсь, что вы найдете это полезным. Как показано на демонстрационной странице , переходы CSS3 также можно использовать для создания 3D-анимации.
Если вы создаете какие-либо интересные примеры, пожалуйста, оставьте свои URL в разделе комментариев ниже.