I have a cool design and try to transfer it to a website.
What I want is basically shown on the picture below. I want a shape behind headlines.
I've seen a canvas solution once on a template, but I don't know how they did it.
Obviously I can’t use simple background-image, because the headlines are different long/ height.
So my idea is to grab the SVG.js – library ( svgjs.dev ) or something similar and put a foreach js script.
Get headline dimensions and draw a canvas/ SVG. Position the canvas/ SVG via CSS as relative.
Do anyone got an idea? Thank you.
It's possible to achieve this design if you use:
inline-block elements
a background-size style set to 100% (or contains if you don't want it to fit the whole width and height element)
an SVG background image (prettier than bitmaps)
So You could set this style for such elements (background-repeat style seems to be removable):
header, h1, h2 /* whatever... */
{
background-image:url("your_fantastic_resizable_background.svg");
background-size: 100% 100%;
background-repeat:no-repeat;
display: inline-block;
}
Thus, this design is kind of flawed: if two inline-block styled elements follow each in the code flow, the last will be appended next to the first, which is not you probably want. Hence, you'll have to insert between a line-break between:
<header>
<span>Test</span>
<span>For a great logo</span>
</header>
<br/> <!-- sad. -->
<h1>Test 1</h1>
Below a working snippet made with a GNU Head logo (Free Art License 1.3).
header,
h1,
h2,
h3,
h4 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/22/Heckert_GNU_white.svg");
background-size: 100% 100%;
background-repeat: no-repeat; /* seems to be not useful ... */
display: inline-block;
font-family: sans-serif;
color: white;
text-shadow: 0px 0px 3px black;
}
header {
font-size: 4em;
}
header span::after {
content: "\A";
white-space: pre;
}
<header>
<span>Test</span>
<span>For a great logo</span>
</header>
<br/>
<h1>Test 1</h1>
<p>A first very good looking sentence.</p>
<h2>Test 2</h2>
<p>A second very good looking sentence.</p>
<h3>Test 3</h3>
<p>A third very good looking sentence.</p>
<h4>Test 4</h4>
<p>A fourth very good looking sentence.</p>
Thank you, Amessihel, but this is not what I needed.
A background-image with background-size of 100% for a variable height/ length headline-object would look in the end like....not well done.
But somehow you pointed me in the right direction. I mean, I am not super happy with this solution, because it's height-limited - but it's working for now.
I just used the :before and :after selector to split the image how I needed.
<style id="SCSS">
h1, h2 {
position: relative;
background: #087f89;
display: inline-block;
padding: 0 20px 0 23px;
color: whitesmoke;
&:after {
content: "";
position: absolute;
height: 100%;
right: 0;
top: 0;
width: 6px;
background-image: url(https://i.imgur.com/Amv4TJp.png);
background-repeat: no-repeat;
background-position: bottom 0 left 0;
}
&:before {
content: "";
position: absolute;
height: calc(100% + 14px);
width: 30px;
background-image: url(https://i.imgur.com/o9bsJN5.png);
background-repeat: no-repeat;
background-position: bottom 0 left 0;
left: 0;
top: 0;
}
}
</style>
<article class="post-2 page type-page status-publish hentry" id="post-2">
<header class="entry-header">
<h1 class="entry-title">Headline</h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up
in your site navigation (in most themes). Most people start with an About page that introduces them to
potential site visitors. It might say something like this:</p>
<p>…or something like this:</p>
<p>As a new WordPress user, you should go to your dashboard
to delete this page and create new pages for your content. Have fun!</p>
<h2>Headline as well</h2>
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up
in your site navigation (in most themes). Most people start with an About page that introduces them to
potential site visitors. It might say something like this:</p>
</div><!-- .entry-content -->
</article>
Here is my fiddle : https://jsfiddle.net/smatplacid/pwaLuzdo/3
Related
The title pretty much says it all. I want the CSS margin: top; on my HTML main_content element to be relative to (a percentage of) the browser window (so that the main_content always stays on the bottom of the browser window. How can I accomplish this?
I've tried this and it doesn't work. (the body {height:100vh} doesn't seem to make body any height as the main_content doesn't stick to the bottom as it should.
body {height:100vh}
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}
<div>Extra Infomation </div>
<div id="main_content">
<p>here you can learn about me and my adventures</p>
</div>
(Don't try this right now) If you go to my website, you will see the "learn about me and my adventures" heading, that, along with the "recent activity", and other stuff below that, that is the section I want at the bottom of the browser window, preferably with the "learn about me and my adventures" part just sticking out from the bottom of the page.
Give .main_content a margin-top of 100vh (just beneath the viewport), and then use transformY to pull it back up:
.main_content {
text-align: center;
padding: 20px;
margin-top: 100vh;
transform: translateY(calc(-100% - 20px));
background:lightblue;
}
.below_content{
margin-top:-100px;
}
<div class="wrapper">
<div>Extra Infomation </div>
<div class="main_content">
<p>here you can learn about me and my adventures</p>
</div>
</div>
<div class="below_content">
This is content below the main content
</div>
so put a . before main_content if it is a class and put # if it is an id.
below css code for main_content id should work.
#main_content {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
You can try is here https://jsfiddle.net/xsdr00dn/
I'm using the cool Felxslider to display a slideshow on a sharepoint installation.
it works quite well, but i still have two questions :
1- How to display the caption (you know, the little transparent background with title/description of the picture) not on the bottom of the image, but on the right side?
And not hover the picture, if possible.
2- I have N images to whos, but the slider always shows N+N images, the first extra ones are clones of the images, but the last is always just blank.
For example, i have 3 pictures to show, but the slider generates 6 slides : Number 4 and number 5 are clones of number 1 and number2, and number 6 is totally blank.
It displays such extra pictures no matter how many pictures I have (if i have 2 pictures to display, it will display 4).
Do you have any idea on how to get rid off all these clones?
Thanks a lot to answer, and have a nice day!
in order to have the caption appear on the right side I added some css rules and a specific HTML caption format.
Here's a jfiddle of the right caption display: http://jsfiddle.net/tyuth1sr/23/
Use the following css on your website's custom stylesheet, then use the HTML format for the captions:
CSS
/*
* flexslider slide styling
*/
.slides {
overflow: hidden !important;
}
.slides div .flex-caption {
overflow: scroll !important;
}
/*
* flexslider caption styling
*/
.flex-caption {
position: absolute;
text-align: left;
font-size: 11px;
background:rgba(255, 255, 255, 0.7);
z-index: 100;
padding: 20px 10px 35px 30px;
width: 287px;
padding-top: 100%;
bottom: 0px;
color: #000;
}
.right {
right: 0;
margin-bottom: 0px;
}
.show-caption {
position: absolute;
top: 48%;
right: 240px;
z-index: 99;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
pointer-events: none;
}
And format your flexslider captions like so:
HTML
<ul class="slides" id="slideshow" ondragstart="return false;">
<li>
<img src="https://iluvmafuckinglife.files.wordpress.com/2012/04/256989-a-sphere-sculpture-made-from-easter-eggs-is-on-display-on-the-day-of-i.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 1</span></p>
<br /><br />
<p class="hcap">Caption 1 text goes here.</p>
</div>
</div>
</li>
<li>
<img src="http://s3-ec.buzzfed.com/static/enhanced/web05/2012/2/8/11/enhanced-buzz-wide-29760-1328717305-32.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 2</span></p>
<br /><br />
<p class="hcap">Caption 2 text goes here.</p>
</div>
</div>
</li>
Please note that you can make the caption appear on over any side of the flexslider slide by removing the .right css position specification of "right: 0px" and adding "left: 0px", "top: 0px;" or "bottom: 0px;" depending on where you want it to appear. You would also have to tweak the text formatting/background padding CSS to make it appear properly in one of those other positions.
I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.
From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/
First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.
Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}
You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.
I recently switched over to using Ghost for my blog and by default I'm using the Casper theme. What I'm trying to do is blur the site-head header, by styling the CSS using -webkit-filter: blur, but when I do this, every other element also becomes blurred.
I've tried adding custom style attributes to each other element like -webkit-filter: blur(0px) !important in an effort to override the site-head blur, but nothing changes. I've also tried adding and blurring a separate element in between the header and the start of the first div leading into the other elements, but this ended in the same result.
I'm pretty new to CSS and Javascript and can't help but think I'm just completely overlooking something here.
This is the index.hbs:
<header class="site-head" {{#if #blog.cover}}style="background-image: url({{#blog.cover}})"{{/if}}>
<div class="vertical">
<div class="site-head-content inner">
{{#if #blog.logo}}<a class="blog-logo" href="{{#blog.url}}"><img src="{{#blog.logo}}" alt="Blog Logo" /></a>{{/if}}
<h1 class="blog-title">{{#blog.title}}</h1>
<h2 class="blog-description">{{#blog.description}}</h2>
</div>
</div>
</header>
And here is the style for the site-head:
.site-head {
position: relative;
display: table;
width: 100%;
height: 60%;
margin-bottom: 5rem;
text-align: center;
color: #fff;
background: #303538 no-repeat center center;
background-size: cover;
}
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/