linear-gradient custom underline to a text with line break - javascript

I have linear gradient text. What I'm trying to achieve is to have text-underline with same colors like text:
What I have already tried:
Default text-decoration: underline gives me non gradiented line which is way to big, and I can't actually customize it at all.
::after pseudoclass gives me underline but it's under whole text block
box shadow is affected by line-height, and I can't get this line closer to text.
body {
background: black;
}
h1 {
font-size: 120px;
display: inline;
line-height: 130px;
position: relative;
text-decoration: underline;
background: linear-gradient(330deg, #ff6553 0, #ff1979 50%, #ffa400 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1::after {
position: absolute;
display: inline;
content: "";
width: 100%;
height: 2px;
background: white;
bottom: 0;
left: 0;
}
<div class="text">
<h1>some text with <br> colorful gradient</h1>
</div>
Here's my code fiddle:
https://jsfiddle.net/3z0qrs6k/

Multiple gradient can do it:
body {
background: black;
}
h1 span {
font-size: 120px;
line-height: 130px;
color:transparent;
--g:linear-gradient(330deg, #ff6553, #ff1979, #ffa400);
background:
var(--g),
var(--g) bottom 2px left 0/100% 2px no-repeat; /* adjust the bottom value to control the offset */
background-clip: text,padding-box;
-webkit-background-clip: text,padding-box;
}
<h1><span>some text with <br> colorful gradient</span></h1>

Related

Animation hover on button in css to expand background color in horizontal and when leave coming strangulate in the center

I am trying to make same animated effect when hover on button.
First of all I want when hover on button to expand background color black in horizontal of button I belive might I shoud use any transation property?
Secondly When leave mouse hover on button background color strangulate like
border-radius in the center of the button.
I have did until now to created a class btn and put same styles in tag head like code below.
But when I leave mouse over on button background-color dont't strangulate in the center as I mentiod before.
<style>
body {
background: #2ecc71;
font-size: 62.5%;
}
.container {
padding: 2em;
}
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background: black;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: #2ecc71;
}
.btn-3::after {
height: 0;
left: 50%;
top: 50%;
width: 0;
}
.btn-3:hover:after {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
/* BUTTON 4 */
</style>
<body>
<div class="container">
<button class="btn-3">Button 3</button>
</div>
</body>
This is exactly what I want to create for button hover by the design UI/UX:enter link description here When hover display background-color: horizontal, after leave mouse hover coming background color strangulate in the center on the button.
By the Figma, I am talking for this button:[![enter image description here][2]][2]

Transparent/Opaque Navigation Bar is Behind "div" with Class "transbox"

I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>
It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.
Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}

HTML Dropdown Returns Blank

For some reason, my HTML dropdown menu is returning completely blank values. However, you can see the values when you hover your mouse over them. My code is at my GitHub here: https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html
EDIT: Sorry, got the wrong link. I fixed it now.
Also, for the specific code with my dropdown:
<div translate="no" class="compact marquee" id="div_language">
<select id="select_language" onchange="updateCountry()">
<option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Català</option><option value="4">Čeština</option><option value="5">Dansk</option><option value="6">Deutsch</option><option value="7">English</option><option value="8">Español</option><option value="9">Euskara</option><option value="10">Filipino</option><option value="11">Français</option><option value="12">Galego</option><option value="13">Hrvatski</option><option value="14">IsiZulu</option><option value="15">Íslenska</option><option value="16">Italiano</option><option value="17">Lietuvių</option><option value="18">Magyar</option><option value="19">Nederlands</option><option value="20">Norsk bokmål</option><option value="21">Polski</option><option value="22">Português</option><option value="23">Română</option><option value="24">Slovenščina</option><option value="25">Slovenčina</option><option value="26">Suomi</option><option value="27">Svenska</option><option value="28">Tiếng Việt</option><option value="29">Türkçe</option><option value="30">Ελληνικά</option><option value="31">български</option><option value="32">Pусский</option><option value="33">Српски</option><option value="34">Українська</option><option value="35">한국어</option><option value="36">中文</option><option value="37">日本語</option><option value="38">हिन्दी</option><option value="39">ภาษาไทย</option></select> <select id="select_dialect" style="visibility: visible;">
<option value="en-AU">Australia</option><option value="en-CA">Canada</option><option value="en-IN">India</option><option value="en-NZ">New Zealand</option><option value="en-ZA">South Africa</option><option value="en-GB">United Kingdom</option><option value="en-US">United States</option></select>
</div>
</div>
Here is the CSS code. Honestly, I don't find anything wrong with it. Is there something wrong with the CSS that makes the dropdown blank?
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
l {
border: ipx solid black
}
/* Style the tabs */
ul.tab {
list-style-type: none;
border-radius:10px;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f2f2f2;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
background-color:#d9d9d9;
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color:#999999 ;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
border-radius:10px;
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* All content below pertains to the function of the tabs in an "accordian" style */
button.accordion {
border-radius:26px;
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '>>';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "<<";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#info {
font-size: 20px;
}
#div_start {
float: right;
}
#headline {
text-decoration: none
}
#results {
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
padding: 15px;
text-align: left;
min-height: 150px;
}
#start_button {
border: 0;
background-color:transparent;
padding: 0;
}
.interim {
color: gray;
}
.final {
color: black;
padding-right: 3px;
}
.button {
display: none;
}
.marquee {
margin: 20px auto;
}
#buttons {
margin: 10px 0;
position: relative;
top: -50px;
}
#copy {
margin-top: 20px;
}
#copy > div {
display: none;
margin: 0 70px;
}
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
#media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>
It looks like the W3Schools style sheet sets the text color of every element to white (color: #fff!important;).
This can be easily remedied with changing the text color for select and option elements:
select, option {
color: black;
}
You can debug something like this by opening your browser's development tools, right-clicking the element and looking at the CSS used to render the element. In this particular case, your body tag uses the w3-green class, which has the following CSS by default:
.w3-green, .w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important;
}
In addition, the normalize style sheet (which has the highest specificity for the select elements) tells the browser to inherit the color from the parent (there's no other color declarations in each of select's parents until it reaches the body tag).
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
You have a lot of CSS libraries and they are interfering with each other. Bootstrap.min.css is setting the color of your select to "inherit". Add this after bootstrap's style to fix that.
select {color:black;}
You can debug your code by using your browser's developer tools and see what style is being applied to your elements and from which library.

When the mouse hovers over an element I want to display a small snippet of text for example "Get Info"

So I have my button below, styled with CSS, and already declared as div in the html file. When the mouse hovers over it, I want to display a small snippet of text, e.g. "Get Info".
I tried selector #GetInfo :hover { but it changed all the style and position of my button.
How can I achieve this?
#GetInfo{
cursor: pointer;
width: 33.2px;
height: 33.2px;
display: inine-block;
z-index:1;
position: absolute;
background-color: rgba(219 ,63,63,.5);
text-align: center;
font-size:23px;
color: white;
top:19px;
right:19px;
}
Is that what you want?
#getInfo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#getInfo .yourTooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
#getInfo .yourTooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#getInfo:hover .yourTooltip {
visibility: visible;
opacity: 1;
}
<html>
<body>
<h1>Pass your mouse over the text below</h1>
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span>
</div>
</body>
</html>
There is a title attribute to almost every HTML element. It shows a text while you hover over the element. Try this:
<input type="button" value="Button" title="I wonder what this red button do ..." />

Insert space at position in border line

I'm displaying a horizontal line using css :
.horizontalLineBottom {
border-bottom:solid #6E6A6B;
border-width:1px;
}
Can I space be insterted a specific position on this line ?
So
______________________________________________
becomes
______________________________ ___
Another solution using border-width:
.line {
width: 20px;
height: 1px;
padding: 0;
border-width: 0 100px 0 150px;
border-style: solid;
border-color: red;
}
http://jsfiddle.net/dfsq/Uttxy/1/
:after or :before psuedo class can help you. Like in this Fiddle:
div {
width:100px;
height:100px;
border:1px solid #000;
margin:50px;
background:yellow;
position:relative;
}
div:after {
content: '';
height:60px;
width:1px;
position:absolute;
top:20px;
left:-1px;
background:yellow;
}
No with border in a block (just a border for a block).
You can add a background-image, if it fits your needs.
You cannot achieve this directly through CSS.
I would suggest 2 solutions
1 ) you can use _ character and make it look like a line and insert space where ever you want and give color attribute through CSS.
2) Use two elements, with first element having some width and some margin-right.
The margin right will give you the required space
You could use a background gradient on the element: http://jsfiddle.net/q652t/
Then you could create as many as you like
.line {
margin: 10px;
height: 1px;
width: 400px;
background: -webkit-linear-gradient(
left, gray 10%, white 10%, white 40%,
gray 40%, gray 60%,
white 60%, white 80%,
red 80%, red 100%);
}
You can't do it directly, but with a small workaround using a pseudo element. The trick is to create a small overlay with the same background color as the background underneath your element.
.verticalLineBottom {
position: relative;
border-bottom: 1px solid #6E6A6B;
}
.verticalLineBottom:after {
content: "";
position: absolute;
right: 20px;
bottom: -1px;
width: 100px;
height: 1px;
background: #fff;
}
Example: http://jsfiddle.net/zxdS7/
Unfortunately, it does not work if the background behind your element has a pattern.
I created this code for you, this fakes the result you're looking for.
.stopped-line {
/* basic styles here */
width: 100px; /* this is mandatory */
position: relative;
}
.stopped-line:before {
position: absolute;
bottom: 0;
display: block;
width: 70%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
.stopped-line:after {
position: absolute;
bottom: 0;
left: 80%; /* Where should the second line start? */
display: block;
width: 20%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
JSBin: click

Categories