How do you fade horizontal text into a vertical gradient?


Tags: css

Problem :

the text fade should appear with solid text on the left and faded text on the right. in this example i made how would you fade jupiter to look like earth and mars using only css?

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
}

enter image description here

jsfiddle <-- actually uses box-shaodw and not a gradient



Solution :

Here is an answer. I just floated a div to the right faded it from 0 to 100% opacity.

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
    position:relative;
}

.fader {
    position:absolute;
    top:0px;
    right:0px;
    display:block;
    width:75px;
    background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 75%)
}

enter image description here

http://jsfiddle.net/w92xv/45/


    CSS Howto..

    Rails - how to build a grid-like list of product page

    How to make a centered, responsive CSS circle within a Boostrap div?

    How to make an element match the height of a dynamic page

    How can i make this image out of viewport without trigering an overflow scrollbar?

    how to clip text in css like gmail does to emails subject listings

    How to build flexible structure?

    How to avoid css overlapping?

    How to set CSS class to Button control using Session value in design page

    how to add a different css to last mysql query result using php

    How to apply focus css for all drop downs?

    Simple CSS: How to fix display:inline issue

    How to add an icon to a button at the bottom right corner

    jquery - How to determine if a div changes its height or any css attribute?

    How Do I set this PHP printed HTML form to stay within

    tags?

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    How to grab the element with certain CSS property value inline

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How can I make images stack on top of each other as web page scales down?

    How to stop jitter of relatively placed items on scrolling with mouse?

    How to change floating div's width to fill all the space they occupy?

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    How to apply text rotation in CSS?

    How to customize a set of controls with CSS

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to remove/close bootstrap css notification? [closed]

    How to increase the width size of JQuery UI Tooltip by its default value?

    CSS - How to Style a Selected Radio Buttons Label?

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to add a line break inside with CSS?

    How to attach user CSS to Microsoft Edge?