I am trying to make a hero image on my wordpress site (genesis theme). I do not want to use a plugin, I want to make it from scratch. I am trying to have the title of the page and a quick blurb contained in the hero image section at all times (like below)
IMG 1
My current set up works fine at full screen, but when the screen is smaller, the blurb moves out of the hero image and the hero image gets smaller and blocked by the navbar (see below)
I want the blurb to be in the hero image at all times. When I move the blurb div into the same div as the hero image, the blurb ends up under the footer for some reason.
I have left my code below. Please let me know if you guys would like more info
<div style="width:100%">
<div style="position: absolute; top: 99px; overflow: auto; z-index: -1; width:100vw" aria-live="polite">
<img style="/*height: 100%;*/ max-height:100% ;min-width: 100%; object-fit: cover;" src="https://mywordpress.site.com/wp-content/path-to-img/hero-image-scaled.jpg" alt="" />
</div>
<div class="our-process-header">
<div style="display: flex; align-items: center; justify-content: center; padding-top: 20px;">
<p style="text-align: center;">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
</p>
</div>
<p> </p>
</div>
</div>
The style for our-process-header is below
#media screen and (max-width: 1070px) {
.our-process-header {
width: 100%;
}
}
#media screen and (min-width: 1300px) {
.our-process-header {
width: 50%;
}
}
Part of a mockup I'm working on is the following.
I'm trying to get the triangular right end of the "Delay Your Payments" div to match the mockup, if possible using CSS without using any sliced images and without using using any absolutely valued pixels or anything that will screw up if the dimensions of the container change after more text is added.
Attempt: http://jsfiddle.net/a7L3tytp/
HTML:
<div class="delay-your-payments">
<h3>Delay Your Payments</h3>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
CSS:
div.delay-your-payments { background: #1AA3B4; padding: 20px; position: relative; width: 80%; }
div.delay-your-payments:after { color: #1AA3B4; right: 0; position: absolute; content: "\25B6"; top: 50%; transform: translateY(-50%); right: -11px; }
div.delay-your-payments > h3 { color: #FFF; }
div.delay-your-payments > p { color: #FFF; }
Here's my solution
div.delay-your-payments { float:left;background: #1AA3B4; padding: 20px; height:200px;position: relative; width: 80%; }
div.delay-your-payments > h3 { color: #FFF; }
div.delay-your-payments > p { color: #FFF; }
.arrow-right {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid green;
float:left;
}
*{
box-sizing:border-box;
}
<div class="delay-your-payments">
<h3>Delay Your Payments</h3>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
<div class="arrow-right"></div>
I'm trying to do an iphone style swipey thing on my webpage. The idea is that in my sidebar, if I click a link it will side the sidebar to the left to reveal where that link would go to. To do this, I am creating two sidebars side by side, the visible sidebar and the next sidebar that will be hidden behind another element.
An example of the sidebars can be found at http://jsfiddle.net/gpcC6/7/
The problem I'm having, is when the window is resized, the second sidebar goes under the first. I want to to stay to the right, even if it means that it goes off the side of the screen. Is this possible?
Thanks
Put the sidebars in a container that has white-space: nowrap and make them display: inline-block instead of floating them and it should work as per your instructions.
Note that white-space: nowrap in some browsers will interpret the space between two divs in the HTML as an actual space
<div>
</div><!-- SPAAAAAACE -->
<div>
</div>
To remove that spacing you need to place them on the same line
<div>
</div><div>
</div>
Alternatively, you can add a font: 0; to the parent element, in this case the container that will remove the spacing as well, but beware that you need to explicitly define the font size for all elements before you do that, otherwise all the child elements will have a font size of 0 as well. ;)
See this question and this article for more information.
Sample | Code
CSS
div{
font-size: 16px;
}
#topbar {
height: 40px;
background-color: blue;
}
.wrapper{
white-space: nowrap;
font-size: 0;
}
.sidebar {
width: 200px;
display: inline-block;
white-space: normal;
}
.title {
height:30px;
background-color: red;
}
.main {
height: auto;
overflow: scroll;
}
HTML
<div id="topbar">
hello
</div>
<div class='wrapper'>
<div class="sidebar">
<div class="title">
title
</div>
<div class="main">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
</div>
<div class="sidebar">
<div class="title">
title
</div>
<div class="main">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
</div>
</div>
Put a wrapping div around your bars and give it a fixed width or a min-width. Then you must only look that your sidebars fit in this wrapping container next to each other. That guarantees that they stay next to each other even when the window is smaller and you can scroll horizontally.
I've had alittle look around and can't find anything about this.
If i have a paragraph of text, is there a way, maybe with CSS3 to gradually change the colour of the text as it goes down to the page? instead of the way that gradient does it, because that only does it on the word not the whole paragraph of text.
So i want some text to start off white and then fade into black as it gets to the end of the paragraph.
I'm really not sure it can be done... Maybe there is a java script that can do it.
Thanks.
You can do it using CSS but it will only work in webkit browsers (Chrome and Safari):
p {
background: linear-gradient(red, blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
Here's a simple solution with basic CSS. You can add an overlay div with linear-gradient from white to transparent. This div will take the full width and height of the desired text.
Example:
<style>
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(white, transparent);
}
</style>
<div style="position: relative;">
<p>
Some text<br>
Some text<br>
Some text<br>
Some text<br>
</p>
<div class="overlay"></div>
</div>
I was able to do something similar in pure css, however, it does not work in IE, since it does not support mix-blend-mode css property:
http://caniuse.com/#feat=css-mixblendmode
The code snippet is below. Hope it helps someone.
<html>
<head>
<style>
.gradient {
position: relative;
content: '';
display: block;
width: 260px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1)));
background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
}
.gradient p {
color: #000;
background: #fff;
mix-blend-mode: lighten;
}
</style>
</head>
<body>
<div class="gradient">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
In 2021, we can do this cross-browser!
p {
background-image: linear-gradient(red, blue);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
Some things to note:
A lot of the old examples use -webkit-text-fill-color rather than color. The two are actually functionally identicial[1] (and both support transparent!), -webkit-text-fill-color just takes precidence. The reason this was used in old examples was because it provided a graceful fallback for non-webkit browsers --- any non-webkit browser that ignored the gradient or clip instructions would also ignore the -webkit-text-fill-color instruction, meaning that you wouldn't be left with transparent text on unsupported browsers. I guess this is a problem with this cross browser implementation, in that that we can't do a fallback like this, but it'll really only be a problem for really old browsers like IE11.
background-clip is now standards tracked and implemented in other browsers (e.g. Firefox), but strangely the Chrome folks have chosen to keep the text clip option only available on their own vendor prefixed version, which is why we still need both[2].
I have tested this, and it does work in Chrome 95 & Firefox 91.
The easiest way for cross-browser text gradients is to use an image.
http://webdesignerwall.com/tutorials/css-gradient-text-effect
This do
.p {
background: linear-gradient(to right, #911a80, #d42b45);
background-clip: text;
color: transparent;
}
I want a format html using CSS so that I get the following:
Image on the left, with subject and
body next to it on the right. I want
subject to be on one line and the body
to be on the other.
With One message after each other
on subsequesnt blocks downs the page.
However I'm getting the subject and the body one one line and a cacade effect down the
page.
Here is what I seem to be getting.
I just cannot seem to get the hang of what's needed.
My html is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
</head><body>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
</body></html>
My CSS is:
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.message{
display: block;
}
.subject {
display: inline;
}
.body {
display: inline;
}
Edit: I've edited the code to show where I started from. I was under the impression that div class='message' would cause a line break between messages but I'm getting a cascade effect.
Add:
class="floatimgleft"
to your img tags:
<img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />
Also, seems you are not using to class either and you are missing = in the <div class'message'>.
Here's a jsfiddle to test it out:
http://jsfiddle.net/CdBSU/
EDIT: For having it clear, add clear: left to message. See the fiddle:
http://jsfiddle.net/CdBSU/2/
for a demonstration.
For the layout you were looking for, I would probably go with something more like:
Index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul id="messages">
<li>
<div>
<span class="icon"></span>
<h2>Subject</h2>
<p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</li>
<li>
<div>
<span class="icon"></span>
<h2>Subject</h2>
<p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</li>
</ul>
</body>
</html>
Style.css:
h2, p { clear: none; padding: 0px; margin: 0px; }
ul#messages { text-align: left; }
ul#messages li { margin-bottom: 25px; }
ul#messages li > div > span.icon { float: left; display: block; width: 64px; height: 64px; border: 1px solid #111; /* border added to demonstrate */ background-image: url('../code/images/arrow-right.png'); }
Demonstrated at: http://jsfiddle.net/j7KHg/2/