Opacity Vertical Gradient Text Design

Currently exploring various methods in CSS3, jQuery, SVG, or canvas to achieve a specific effect, but encountering some challenges along the way.

Key considerations to take note of:

  1. The text gradient is vertical with opacity
  2. The text could span multiple lines based on user input
  3. An outlined text effect is required (considering text shadow for implementation, without IE support)
  4. A background image will be positioned behind the text

Although -webkit-linear-gradient offers a simple solution, aiming for cross-browser compatibility beyond Webkit is essential for a developer.

Referencing a demo from Chris Coyier showcasing this effect with added background image.

Exploring JavaScript and the jQuery library for alternatives due to lack of cross-browser support. One plugin, PXGradient by MRNIX, offers a unique approach by transitioning HEX values to create a gradient effect.

While various plugins offer similar transitions, none seem to support rgba or opacity. Stackoverflow discusses related queries and suggests Cufon, although limited in supporting text shadows.

Additionally, SVG solutions have been explored, such as the example found here. However, dynamic width and height constraints pose challenges for user-inputted text.

Considering dynamic SVG implementation based on text dimensions, seeking assistance due to limited SVG proficiency.

Exploring various options across CSS, jQuery, SVG, and canvas for a suitable solution, yet encountering roadblocks.

Any insights or solutions on achieving this effect would be greatly appreciated.

Cheers!

jquerycsstextsvggradient

Answer №1

This technique can be easily achieved using SVG, and is compatible with all modern browsers, including IE10+.

HTML/SVG

<img src="http://lorempixel.com/400/300"/>

<svg width="400" height="300">
    <defs>
        <linearGradient id="textgrad" x2="0" y2="1">
            <stop offset="0.65" stop-color="white" stop-opacity="0.7"/>
            <stop offset="0.9" stop-color="white" stop-opacity="0"/>
        </linearGradient>
        <filter id="emboss">
            <feConvolveMatrix kernelMatrix="1 0 0
                                            0 0 0
                                            0 0 -1"/>
        </filter>
    </defs>

    <text class="textblock fading">
        <tspan x="20" y="130">ERGY</tspan>
        <tspan x="20" y="260">SOLU</tspan>
    </text>
    <text class="textblock embossing">
        <tspan x="20" y="130">ERGY</tspan>
        <tspan x="20" y="260">SOLU</tspan>
    </text>
</svg>

CSS

svg {
    position: relative;
    top: -300px;
}

.textblock {
    font-family: sans-serif;
    font-size: 130px;
    font-weight: bold;
}

.fading {
    fill: url(#textgrad);
    stroke: white;
    stroke-width: 0.5;
    stroke-opacity: 0.5;
}

.embossing {
    fill: white;
    filter: url(#emboss);
}

Check out the live demo here

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

Looking to display several charts on a single page with varying datasets?

I have successfully integrated a doughnut chart plugin into my website. However, I would like to display multiple charts on the same page with different data sets. Below is the code snippet for the current chart being used: This is the chart I am using & ...

javascripthtmlcsschartschart.js

What is the contrast between specifying a MIME type and omitting it?

If I were to write a stylesheet in an HTML document, it's worth noting that since the introduction of HTML5, the type attribute is no longer necessary as text/css has become the default and only possible value: <style type='text/css'> ...

htmlcssmime-typesmedia-type

What is the process for sending dynamic emails in Business Catalyst?

I'm currently using Adobe Business Catalyst for my project. I've set up a web form with several fields, including three dynamic fields from "Web Apps." One of the fields is called "Select Location." Each location has an associated email address ...

jqueryemailadobebusiness-catalyst

Enhancing Image Quality in Internet Explorer 10

Here is my current situation: I am working on a web page with a responsive design. The layout of the page consists of two vertical halves, and I intend to display an image (specifically a PDF page converted to PNG or JPG) on the right side. The challenge ...

htmlcssimageinternet-explorer-10interpolation

The cart icon is not visible in the responsive mode

There seems to be an issue with my cart icon not displaying in the navbar toggle when the display size is reduced. I am currently using Bootstrap 5 for the navbar. I can navigate to the cart page by clicking on the toggler, but the icon itself is not visi ...

htmlcssbootstrap-5

Submitting a file using Ajax XMLHttpRequest

Currently, I am facing an issue while attempting to send a file using the following XMLHttpRequest code. var url= "http://localhost:80/...."; $(document).ready(function(){ document.getElementById('upload').addEventListener('cha ...

javascriptajaxjqueryfile-uploadxmlhttprequest

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

Error: The function seems to be malfunctioning or missing

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $('div'); // <--- THIS DOESN'T WORK </script> An issue has been encountere ...

javascriptjquery

Incorporate a horizontally rotating preloader to enhance loading experience

I am currently in the process of developing a preloader that rotates an image horizontally. After researching different threads and ideas, I came across a solution that looks something like this: <style> .imageRotateHorizontal{ -moz-anima ...

htmlcssanimation

After closing and reopening the jQuery modal, the name does not appear

I crafted a custom modal window to display images along with comments and the owner's name. The issue arises when I close the current modal and reopen it; the owner's name disappears. Oddly enough, the name is displayed the first time the modal i ...

javascriptjqueryhtmlajax

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Currently, I am developing a JSP project that utilizes Bootstrap for the frontend. I have come across a question regarding HTML design. Is there a way to replace one div tag with another div on the same page without navigating to a new URL using Bootstrap ...

javascriptjqueryhtmlcss

The syntax for jQuery

While delving into the world of jQuery, I stumbled upon a code snippet that caught my attention. Although I am well versed in jQuery's basic selector syntax $('element'), I must admit that the $. syntax perplexes me. Take for instance the fo ...

javascriptjquerysyntax

How can I set the input tag to reset back to 1 when a certain event occurs?

I am currently developing an HTML Snakes And Ladders game. On the settings screen, there is an input field where users can select the size of the board. Depending on their choice, they will be able to choose a maximum number of snakes and ladders. For exa ...

javascriptjqueryhtmlajax

What are the steps to crafting a basic JavaScript or jQuery function within CodeIgniter?

I'm currently working on creating a basic JavaScript function within CodeIgniter that is triggered when a radio button is clicked. <input type="radio" name="amount" value="<?php echo $plan['amount']; ?>" onclick="fn()" /> The J ...

javascriptphpjquerycodeigniter

Change the position of an HTML image when the window size is adjusted

My web page features a striking design with a white background and a tilted black line cutting across. The main attraction is an image of a red ball that I want to stay perfectly aligned with the line as the window is resized, just like in the provided gif ...

javascripthtmlcss

What is the best way to showcase a banner on a website to alert the user who is currently logged in about a new message waiting for them?

My current project involves enhancing the features of an existing ASP.net Form Application. User authentication is required during login. One of the new requirements is to display a special message to users when they log in, indicating that they have new ...

asp.netjquerynotifications

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

javascriptjqueryhtmlajaxjson

Arranging the navigation bar at the top of my chatbot in HTML

Is there a way to position the navigation bar above the chatbot on my website? The following CSS code excerpt is from the "navigation bar css" file: *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border ...

htmlcss

Tips for relocating a div panel below all other div panels when a button is clicked with JQuery and CSS

There are several panels stacked below each other. Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack. For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by ...

javascriptjqueryhtmlcss

Organize the HTML output generated by a PHP array

There must be a simple solution to this, but for some reason, it's escaping me right now. I've created custom HTML/CSS/JS for a slider that fetches its content from an array structured like this: $slides = [ [ 'img' = ...

javascriptphpjqueryhtmlcss