What is the best way to apply multiple text shadows to a single piece of text using the jQuery ".css()" method?

Is it possible to create multiple text shadows for a single piece of text using the jQuery ".css()" method?

I'm currently working on animating the title of a page on my website, which includes adding a 3D effect with multiple shadows. I also want to change the color of the text when the page loads.

This is my current code snippet:

// Function to animate section 1 of the main page title
function tsec1Anim(){
    $("#tsec1").css({
        "font-family" : "Lucida Console",
        "font-weight" : "bold",
        "text-align" : "center",
        "margin-bottom" : "12px",
        "top" : "0px",
        "color" : "#0033cc",
        "font-size" : "75px",
        "text-shadow" : "0px 1px 0px #002eb8, 0px 2px 0px #0029a3, 0px 3px 0px #00248f, 0px 4px 0px #001f7a, 0 5px 0 #001a66, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.4), 0 3px 5px rgba(0,0,0,.50), 0 5px 10px rgba(0,0,0,.80), 0 10px 10px rgba(0,0,0,.60), 0 20px 20px rgba(0,0,0,.75)",
        "margin-top" : "15px"
     });
}
javascriptjqueryhtmlcssonload

Answer №1

When incorporating multiple text-shadows, remember to separate them with a comma:

text-shadow: 0 0 5px black, 0 0 10px red;

Your coding example looks like this:

text-shadow: 0px 1px 0px #002eb8,
         0px 2px 0px #0029a3,
         0px 3px 0px #00248f,
         0px 4px 0px #001f7a,
         0 5px 0 #001a66,
         0 6px 1px rgba(0,0,0,.1),
         0 0 5px rgba(0,0,0,.1),
         0 1px 3px rgba(0,0,0,.4),
         0 3px 5px rgba(0,0,0,.50),
         0 5px 10px rgba(0,0,0,.80),
         0 10px 10px rgba(0,0,0,.60),
         0 20px 20px rgba(0,0,0,.75);

Check out the JSFiddle Demo

If you are using jQuery, it might be easier for you to utilize addClass() in your code:

.myClass{
     font-family : Lucida Console;
            font-weight : bold;
            text-align : center;
            margin-bottom : 12px;
            top : 0px;
            color : #0033cc;
            font-size : 75px;
            text-shadow: 0px 1px 0px #002eb8,
             0px 2px 0px #0029a3,
             0px 3px 0px #00248f,
             0px 4px 0px #001f7a,
             0 5px 0 #001a66,
             0 6px 1px rgba(0,0,0,.1),
             0 0 5px rgba(0,0,0,.1),
             0 1px 3px rgba(0,0,0,.4),
             0 3px 5px rgba(0,0,0,.50),
             0 5px 10px rgba(0,0,0,.80),
             0 10px 10px rgba(0,0,0,.60),
             0 20px 20px rgba(0,0,0,.75);
            margin-top : 15px;
    }
function tsec1Anim(){
    $("#tsec1").addClass('myClass');
}

View the updated JSFiddle Demo here

Answer №2

Here is a code snippet for you to try out:

function customizeText(){
    $("#element").css({
        "font-family" : "Arial",
        "font-weight" : "bold",
        "text-align" : "center",
        "color" : "#ff0000",
        "font-size" : "20px",
        "text-shadow" : "2px 2px 2px #000000",
        "margin-top" : "10px"
        });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="element">Sample Text</div>
<button onclick="customizeText()">Click Me</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty executing the npm test command for my Angular 2 application

I am currently working on an Angular 2 application, and I am fairly new to it. I have set it up with Cordova app and run it through npm. The app starts without any errors and runs smoothly. However, when I try to run the tests using node (i.e., npm test), ...

javascriptangularjsnode.jscordova

What is causing the SVG element to malfunction on iOS devices?

I am facing an issue with the <h1> tag in my design. The SVG element within it is not appearing on mobile phones when I write a media query for devices with a minimum width of 400px, even though it works fine on screens with a minimum width of 800px. ...

htmlcssiosiphonesvg

Retrieving information from a previous AJAX request using AJAX

I am facing an issue with my page where data is dynamically loaded using AJAX calls. Main Page: $( document ).ready(function() { $( "#searchbar" ).load( "searchbar.php" ); }); $( document ).ajaxStart(function() { $( "#loader" ).show(); }); $( documen ...

phpjqueryajax

What is the best way to ensure an image within a Bootstrap 5 column scrolls along with the page, but does not go past

How can I ensure that the image inside "fixedContainer" follows scrolling without going below the end of <div class="col-lg-8">, especially when the sidebar has a large amount of data and requires scrolling? <link href="htt ...

htmlcsstwitter-bootstrapbootstrap-5

Preventing jQuery parser from turning arrays into objects

My JavaScript data file has the following structure: data = { items : [ {name: 'ABC'}, {name: 'CDF'} ] } After passing this data to $.ajax(type: 'POST', data: data), the converted data appears like this: it ...

javascriptjqueryarraysajaxhttp-post

What causes the undefined value of "this" in the Vue Composition API setup function?

A Vue component I've created is using v3's composition API: <template> <input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" /> <labe ...

javascriptvue.jsvuejs3vue-composition-api

if statement for a method within the ng-click directive

Whenever I click the button, I want to either execute createRole() if RoleName is not set or EditRole() method if RoleName is set. However, for some reason, EditRole() is being executed for both cases. <button type="submit" ng-click="selectedItem.Rol ...

javascriptangularjsangularjs-ng-click

What is the process for incorporating an array of models?

let userData = await db.user.findOne({ attributes: attributes, include: ['charges', 'availability', 'practice',// 'services', 'education',// 'user_role', ...

javascriptmysqlnode.jssequelize.js

What are effective ways to prevent anythingSlider (jQuery plugin) from sliding?

How can I prevent the slider from sliding backwards on anythingslider when the current page is 1? I do not want it to rotate. I have tried: onSlideBegin : function(e, slider){ return false; } // there is no check I just need to know how to stop slidin ...

jqueryanythingslider

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency

"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and P ...

javascripthtmlcss

Unusual glitch involving padding

Recently, I created a basic search application using React and incorporating Bootstrap's Grid system. However, I encountered an issue where the entire interface shifts to the left by approximately 10px when four or more products are rendered. https:/ ...

javascriptreactjsbootstrap-4bootstrap-grid

Navigation Menu in Motion

I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling o ...

javascripthtmlcssnav

"Embed a div element over a full-screen iframe or image

Is it possible to create a div within a fullscreen iframe without using JavaScript? I want to achieve a similar layout to the Netflix player, with static buttons and functions in PHP. The div should have a cut background positioned on top of the iframe. ...

phphtml

How to display text on a new line using HTML and CSS?

How can I properly display formatted text in HTML with a text string from my database? The text should be contained within a <div class="col-xs-12"> and nested inside the div, there should be a <pre> tag. When the text size exceeds the width o ...

javascriptjqueryhtmlcss

Packager freezing after running npm audit and the component directory is nonfunctional

Greetings, To begin with, I would like to acknowledge that this issue may have been addressed in previous posts, but despite following suggestions on Stack Overflow and GitHub, I am still facing two specific problems. Here are the issues I am encounterin ...

javascriptreact-nativenpmexpo

Tips on creating a search query with date condition in the format of M/D/YYYY and stored as a string

In my collection, I have two fields structured like this: { "StartDate" : "1/2/2019", "EndDate" : "5/14/2019" } I need to write a find query to retrieve documents within the current date range. For example: db.collection.find({StartDate:{$lte: &a ...

javascriptnode.jsmongodb

Duplicate numerous Td elements

I am trying to manipulate a table with 3 columns and 6 rows by copying the contents of certain cells into a newly created column, inserting them in the middle of the table. Here is the desired outcome: https://i.sstatic.net/RVTfV.png This is the approach ...

javascriptjqueryhtml

Error encountered when attempting to retrieve HTML content from localhost using AJAX

Attempting to insert HTML code into a div element using ajax, similar to how it's done with an iframe. Testing this out locally first to avoid Same Origin Policy complications. The web application is currently hosted on a wamp server. There are two ...

javascriptphpjqueryajax

assigning a value of undefined to the selected option in AngularJS

How can I use angularjs ng-options and ng-model directives to set the select option and detect when the dropdown option is selected or changed? I want to include an extra empty option so that the user can deselect it, and in that case, I want the value in ...

javascriptangularjs