today wanted to set the size of a background on a svg using the background-size property, but it didn't worked because the background wasn't an image, but it was a normal color (#ecf2f8)
here is what i want to do:
here is what i did:
here is my code:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
}
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
Have a nice day!
Try using padding to increase the size of the background around your element:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: 10px;
}
The px value you pick depends on what you want, just play around with different values and see if it gets your desired output.
Example code snippet with padding in CSS:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: 10px;
}
<html>
<head>
<title>while</title>
</head>
<body>
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
</body>
</html>
Html-css-js snippet of code: Code
You could use padding to resize the background of your icon. You can also resize the SVG icon by using transform: scale(1);
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: .5em; /* You could also use px */
transform: scale(1.5); /*Resize/scale the SVG*/
}
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
I added padding and transform:scale() in the CSS, please do check the snippet if it is your desired output
You need to create a div and add the background to the div, because i don't know why, with the padding property the svg disappears, here is the code:
<div id="svg1">
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
</div>
#svg1 {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 50px;
padding: 10px;
height: 30px;
width: 30px;
}
#arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* this will center the svg in the div horizontally and vertically */
Related
I'm coding a Frontend Mentor project and have a question. I have no idea what i can do because I'd like to code navigation that change their height when i clicked on it. I tried set transform:scaleX(0) and next when i clicked it's roll down. But when i did it below my navigation item is free space and why it's dont scale to 0?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Overpass", sans-serif;
font-size: 16px;
}
.nav {
position: absolute;
display: flex;
flex-direction: column;
left: 50%;
top: 15%;
width: 90%;
min-height: 70%;
transform: translateX(-50%);
background-color: hsl(0deg, 0%, 100%);
color: #000;
border-radius: 0.3em;
padding: 1em;
letter-spacing: 2px;
z-index: 5;
text-align: center;
}
.nav__lists {
flex-grow: 1;
}
.nav .first {
transform: scaleX(0);
}
.nav__list {
padding: 0.5em 0;
font-size: 1.2rem;
font-weight: bold;
list-style-type: none;
}
.nav__list-items {
background-color: hsl(240deg, 2%, 79%);
font-size: 0.8em;
line-height: 1.5em;
padding: 1em 0;
}
.nav__list-items h4 {
padding: 0.2em 0;
}
.nav__user {
flex-basis: 30%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-top: 1px solid hsl(240deg, 2%, 79%);
padding: 1em 0;
}
.nav__user-btn {
letter-spacing: 2px;
padding: 1em 2.5em;
background: none;
border: none;
font-weight: bold;
font-size: 1rem;
}
.nav__user-btn--red {
background: linear-gradient(hsl(13deg, 100%, 72%), hsl(353deg, 100%, 62%));
border-radius: 1.5em;
color: hsl(0deg, 0%, 100%);
}
.header {
margin-bottom: 4em;
padding: 0 1em;
position: relative;
min-height: 100vh;
z-index: -1;
background: linear-gradient(hsl(13deg, 100%, 72%), hsl(353deg, 100%, 62%));
color: hsl(0deg, 0%, 100%);
text-align: center;
border-radius: 0 0 0 6em;
overflow: hidden;
}
.header__img {
position: absolute;
top: 10%;
left: -70%;
transform: scale(0.8);
transform-origin: top left;
z-index: -1;
}
.header__top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3em 0;
}
.header__top-burger .close {
display: none;
}
.header__top-logo {
height: 100%;
}
.header__title {
padding: 2em 0;
}
.header__btns {
padding-top: 2em;
}
.header__btns-btn {
font-weight: 700;
border: 1px solid hsl(0deg, 0%, 100%);
font-size: 1rem;
padding: 0.8em 1em;
color: #fff;
margin-right: 1em;
border-radius: 1.2em;
}
.header__btns-btn--white {
background-color: hsl(0deg, 0%, 100%);
color: hsl(353deg, 100%, 62%);
}
.header__btns-btn--red {
background: none;
}
.hide-list {
display: none;
}
.nav__roll {
transform: scaleX(100%);
}/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<title>Frontend Mentor | [Blogr]</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Overpass:wght#300;600&family=Ubuntu:wght#400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<nav class="nav">
<div class="nav__lists">
<ul class="nav__list">
<li class="nav__list-title">
Product
<span class="arrow"
><svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="7"
>
<path
fill="none"
stroke="#FF7B86"
stroke-width="2"
d="M1 1l4 4 4-4"
/></svg
></span>
</li>
<li class="nav__list-items first">
<h4 class="nav__list-item">Overview</h4>
<h4 class="nav__list-item">Pricing</h4>
<h4 class="nav__list-item">Marketplace</h4>
<h4 class="nav__list-item">Features</h4>
<h4 class="nav__list-item">Integrations</h4>
</li>
</ul>
<ul class="nav__list">
<li class="nav__list-title">
Company
<span class="arrow"
><svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="7"
>
<path
fill="none"
stroke="#FF7B86"
stroke-width="2"
d="M1 1l4 4 4-4"
/></svg
></span>
</li>
<li class="nav__list-items">
<h4 class="nav__list-item">About</h4>
<h4 class="nav__list-item">Team</h4>
<h4 class="nav__list-item">Blog</h4>
<h4 class="nav__list-item">Careers</h4>
</li>
</ul>
<ul class="nav__list">
<li class="nav__list-title">
Connect
<span class="arrow"
><svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="7"
>
<path
fill="none"
stroke="#FF7B86"
stroke-width="2"
d="M1 1l4 4 4-4"
/></svg
></span>
</li>
<li class="nav__list-items">
<h4 class="nav__list-item">Contact</h4>
<h4 class="nav__list-item">Newsletter</h4>
<h4 class="nav__list-item">LinkedIn</h4>
</li>
</ul>
</div>
<div class="nav__user">
<button class="nav__user-btn">Login</button
><button class="nav__user-btn nav__user-btn--red">
Sign Up
</button>
</div>
</nav>
<header class="header">
<svg
class="header__img"
width="1324"
height="1323"
viewBox="0 0 1324 1323"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
x1=".695%"
y1="0%"
x2="99.305%"
y2="100%"
id="a"
>
<stop stop-color="#FF8F71" offset="0%" />
<stop stop-color="#FF3E55" offset="100%" />
</linearGradient>
</defs>
<path
d="M821.895188,497.739327 L821.895188,825.739327 L493.895188,825.739327 L493.895188,597.739327 C493.895188,542.510852 538.666713,497.739327 593.895188,497.739327 L821.895188,497.739327 Z M276.655938,496.460979 C367.230637,496.460979 440.655938,569.88628 440.655938,660.460979 C440.655938,751.035678 367.230637,824.460979 276.655938,824.460979 C186.081239,824.460979 112.655938,751.035678 112.655938,660.460979 C112.655938,569.88628 186.081239,496.460979 276.655938,496.460979 Z M822.227687,111.489551 L822.227687,439.489551 L594.227687,439.489551 C538.999212,439.489551 494.227687,394.718026 494.227687,339.489551 L494.227687,339.489551 L494.227687,111.489551 L822.227687,111.489551 Z M440.061253,110.58581 L440.061253,338.58581 C440.061253,393.814285 395.289728,438.58581 340.061253,438.58581 L112.061253,438.58581 L112.061253,110.58581 L440.061253,110.58581 Z"
transform="rotate(22 67.652 1066.199)"
fill="url(#a)"
fill-rule="evenodd"
/>
</svg>
<div class="header__top">
<div class="header__top-logo">
<svg
width="101"
height="40"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 30.803V1.486h10.653c1.982 0 3.695.31 5.14.93 1.446.619 2.56 1.5 3.345 2.642.785 1.142 1.177 2.484 1.177 4.026 0 1.404-.303 2.636-.909 3.695a6.48 6.48 0 01-2.56 2.498c1.487.578 2.643 1.494 3.469 2.746.826 1.253 1.239 2.732 1.239 4.439 0 1.707-.44 3.18-1.322 4.418-.88 1.239-2.12 2.202-3.716 2.89-1.596.688-3.482 1.033-5.657 1.033H0zM5.946 6.565v6.73h4.046c1.35 0 2.388-.282 3.118-.846.73-.564 1.094-1.397 1.094-2.498 0-1.101-.365-1.94-1.094-2.519-.73-.578-1.769-.867-3.118-.867H5.946zm0 19.159h4.624c1.542 0 2.732-.33 3.572-.991.84-.66 1.26-1.61 1.26-2.85 0-1.238-.42-2.188-1.26-2.848-.84-.66-2.03-.991-3.572-.991H5.946v7.68zm19.282 5.079V0h5.781v30.803h-5.78zm20.893.619c-1.624 0-3.124-.29-4.5-.867a10.94 10.94 0 01-3.593-2.416 10.96 10.96 0 01-2.374-3.654c-.564-1.404-.846-2.931-.846-4.583 0-1.652.289-3.173.867-4.563a11.354 11.354 0 012.415-3.654 10.96 10.96 0 013.634-2.436c1.39-.578 2.91-.867 4.562-.867 1.625 0 3.125.289 4.501.867a10.94 10.94 0 013.592 2.416 11.01 11.01 0 012.375 3.633c.564 1.39.846 2.911.846 4.563 0 1.651-.289 3.179-.867 4.583a11.297 11.297 0 01-2.416 3.675 10.96 10.96 0 01-3.633 2.436c-1.39.578-2.911.867-4.563.867zm.083-5.203c1.046 0 1.982-.275 2.808-.825.825-.551 1.48-1.301 1.96-2.25.483-.95.723-2.03.723-3.242 0-1.211-.24-2.292-.722-3.241-.482-.95-1.136-1.7-1.961-2.25-.826-.551-1.762-.826-2.808-.826-1.046 0-1.982.275-2.808.825-.826.55-1.48 1.301-1.961 2.25-.482.95-.723 2.03-.723 3.242 0 1.211.241 2.292.723 3.241.482.95 1.135 1.7 1.961 2.25.826.551 1.762.826 2.808.826zm24.155 3.964a9.13 9.13 0 01-3.86-.826 9.492 9.492 0 01-3.118-2.291c-.881-.977-1.57-2.12-2.065-3.427-.495-1.308-.743-2.719-.743-4.233 0-1.569.255-3.02.764-4.356a10.614 10.614 0 012.147-3.489 10.174 10.174 0 013.22-2.333c1.225-.564 2.554-.846 3.985-.846 1.404 0 2.67.282 3.799.846a7.402 7.402 0 012.807 2.457l.124-2.684h5.327v19.2c0 1.68-.269 3.207-.805 4.584-.537 1.376-1.301 2.56-2.292 3.55a10.231 10.231 0 01-3.53 2.292c-1.363.537-2.87.805-4.522.805-1.624 0-3.083-.254-4.376-.764a10.468 10.468 0 01-3.386-2.126 10.035 10.035 0 01-2.271-3.18L67.097 32a5.452 5.452 0 001.92 1.879c.784.454 1.672.681 2.663.681 1.074 0 2.003-.24 2.787-.723.785-.481 1.397-1.156 1.838-2.023.44-.867.66-1.879.66-3.035v-1.775a7.793 7.793 0 01-2.828 2.333c-1.143.564-2.402.846-3.778.846zm1.404-5.12c1.018 0 1.92-.254 2.704-.764a5.556 5.556 0 001.879-2.064c.468-.867.702-1.851.702-2.952 0-1.102-.234-2.086-.702-2.953a5.556 5.556 0 00-1.879-2.064c-.784-.51-1.686-.764-2.704-.764-1.019 0-1.92.255-2.705.764a5.556 5.556 0 00-1.879 2.064c-.468.867-.702 1.851-.702 2.953 0 1.1.234 2.085.702 2.952a5.556 5.556 0 001.88 2.064c.784.51 1.685.764 2.704.764zm15.607 5.74V9h5.327l.206 3.304c.55-1.157 1.294-2.044 2.23-2.664.936-.62 2.037-.929 3.303-.929.386 0 .77.035 1.156.103.386.07.73.159 1.033.269l-.62 5.698a4.361 4.361 0 00-.929-.227 7.495 7.495 0 00-.97-.062c-1.597 0-2.822.489-3.675 1.466-.853.977-1.28 2.36-1.28 4.15v10.694h-5.78z"
fill="#FFF"
fill-rule="nonzero"
/>
</svg>
</div>
<div class="header__top-burger">
<svg
class="burger"
width="32"
height="18"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#FFF" fill-rule="evenodd">
<path d="M0 0h32v2H0zM0 8h32v2H0zM0 16h32v2H0z" />
</g>
</svg>
<svg
class="close"
width="26"
height="26"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.607.98l1.414 1.413L14.414 13l10.607 10.607-1.414 1.414L13 14.414 2.393 25.021.98 23.607 11.586 13 .98 2.393 2.393.98 13 11.586 23.607.98z"
fill="#FFF"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
<h1 class="header__title">A modern publishing platform</h1>
<p class="header__text">
Grow your audience and build your online brand
</p>
<div class="header__btns">
<button class="header__btns-btn header__btns-btn--white">
Start for Free</button
><button class="header__btns-btn header__btns-btn--red">
Learn More
</button>
</div>
</header>
<main class="main">
<section>
<article class="article">
<h2 class="article__title">Designed for the future</h2>
<div class="article__content"></div>
</article>
<article class="article">
<h2 class="article__title">
Introducing an extensible editor
</h2>
<div class="article__content">
Blogr features an exceedingly intuitive interface which
lets you focus on one thing: creating content. The
editor supports management of multiple blogs and allows
easy manipulation of embeds such as images, videos, and
Markdown. Extensibility with plugins and themes provide
easy ways to add functionality or change the looks of a
blog.
</div>
</article>
<article class="article">
<h2 class="article__title">Robust content management</h2>
<div class="article__content">
Flexible content management enables users to easily move
through posts. Increase the usability of your blog by
adding customized categories, sections, format, or flow.
With this functionality, you’re in full control.
</div>
</article>
</section>
<section class="violet">
<article class="article">
<h2 class="article__title">
State of the Art Infrastructure
</h2>
<div class="article__content">
With reliability and speed in mind, worldwide data
centers provide the backbone for ultra-fast
connectivity. This ensures your site will load
instantly, no matter where your readers are, keeping
your site competitive.
</div>
</article>
</section>
<section>
<div class="section__logo"></div>
<article class="article">
<h2 class="article__title">Free, open, simple</h2>
<div class="article__content">
Blogr is a free and open source application backed by a
large community of helpful developers. It supports
features such as code syntax highlighting, RSS feeds,
social media integration, third-party commenting tools,
and works seamlessly with Google Analytics. The
architecture is clean and is relatively easy to learn.
</div>
</article>
<article class="article">
<h2 class="article__title">Powerful tooling</h2>
<div class="article__content">
Batteries included. We built a simple and
straightforward CLI tool that makes customization and
deployment a breeze, but capable of producing even the
most complicated sites.
</div>
</article>
</section>
</main>
<footer class="footer">
<h2 class="footer__title"></h2>
<ul class="footer__list">
<li class="footer__list-title">Product</li>
<li class="footer__list-item">Overview</li>
<li class="footer__list-item">Pricing</li>
<li class="footer__list-item">Marketplace</li>
<li class="footer__list-item">Features</li>
<li class="footer__list-item">Integrations</li>
</ul>
<ul class="footer__list">
<li class="footer__list-title">Company</li>
<li class="footer__list-item">About</li>
<li class="footer__list-item">Team</li>
<li class="footer__list-item">Blog</li>
<li class="footer__list-item">Careers</li>
</ul>
<ul class="footer__list">
<li class="footer__list-title">Connect</li>
<li class="footer__list-item">Contact</li>
<li class="footer__list-item">Newsletter</li>
<li class="footer__list-item">LinkedIn</li>
</ul>
</footer>
</body>
</html>
I know that my code is bad but could you help me what can i do
I use a RestAPI, it's giving me different size SVG. Some images are fit but some images don't fit.
Example: If you look at the border and image, you gonna understand.
The main problem is that; I don't know all pictures sizes, How can ı set this case? (İf it's given 100% height change the card height and ı don't want this.)
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/afg.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/blr.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
.card {
border: 2px solid black;
text-align: center;
margin-bottom: rem(50px);
width: 320px;
overflow: hidden;
animation: showCard 0.7s ease-out forwards;
img {
vertical-align: middle;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&__body,
&__footer {
background: $skyblue;
}
&__body {
&-name {
color: $text-navy;
padding: rem(10px) 0;
font-size: rem(20px);
font-weight: $font-bold;
font-weight: normal;
border-bottom: 4px solid $text-navy;
}
&-infos {
padding: rem(15px) 0;
display: flex;
justify-content: center;
color: $text-navy;
span {
white-space: nowrap;
font-size: rem(14.3px);
}
span:not(:last-child) {
padding-right: rem(5px);
border-right: 3px solid $text-navy;
}
span:not(:first-child) {
padding-left: rem(5px);
}
}
}
&__footer {
border-top: 3px solid $text-navy;
padding: rem(15px) 0;
background: $text-navy;
cursor: pointer;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
There is no standard for flag dimensions. RestCountries provides flags in their true dimensions.
I created a 29 kB Single File Web Component that does all SVG flags in fixed dimensions (like most SVG flag Repos do).
And can use RestCountries (or any other SVG flag Repo) as alternative source:
https://flagmeister.github.io/
Alas, I did not create all crests, you picked the exact two I failed to complete: Afghanistan and Andorra for your screenshots. Those flags FlagMeister will default to RestCountries unless prevented with the detail setting.
<script src="https://flagmeister.github.io/elements.flagmeister.min.js"></script>
<style>
div {
display:grid;
grid-template-columns:repeat(6,100px);
gap:10px;
}
[nodetail] {
--flagmeisterdetail:99999;
}
</style>
<h3>RestCountries & FlagMeister (forced to no-detail)</h3>
<div>
<flag-af></flag-af>
<flag-af nodetail></flag-af>
<flag-by></flag-by>
<flag-by nodetail></flag-by>
<flag-ad></flag-ad>
<flag-ad nodetail></flag-ad>
</div>
If you can live with making local copies of all the flags. Then, if you add the following attribute to all SVGs, they will stretch to fit your <img> width and height.
preserveAspectRatio="none"
For instance, the Belarus flag becomes:
svg {
width: 300px;
height: 300px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="450" viewBox="0 0 1098 549" preserveAspectRatio="none">
<title>Flag of Belarus</title>
<rect fill="#C8313E" width="1098" height="549"/>
<rect y="366" fill="#4AA657" width="1098" height="183"/>
<rect fill="#FFF" width="122" height="549"/>
<g id="h">
<g id="q" fill="#C8313E" fill-rule="evenodd" transform="scale(5.304347826,9)">
<path d="M4,0h3v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1zM5,2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM5,4h1v1h-1zM0,1h1v1h-1zM0,7h1v1h-1zM11,0h0.6v2h-.6zM11,7h.6v2h-.6zM2,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM2,11h1v1h-1zM8,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM8,11h1v1h-1zM0,15h1v1h-1zM11,14h.6v2h-.6z"/>
<path d="M0,18h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1h.6v4h-.6v1h-1v1h-1v1h-1v1h-1v1h-1v2.6h-2v-0.6h-1v-1h-1v-1h-1v-1h-1 v-3h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-3v1h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1zM0,22h1v1h-1zM11,25h.6v1h-.6zM9,27h1v1h1v1h.6v1.6h-.6v-.6h-1v-1h-1zM7,30h1v.6h-1z"/>
</g>
<use xlink:href="#q" transform="translate(122,0) scale(-1,1)"/>
</g>
<use xlink:href="#h" transform="translate(0,549) scale(1,-1)"/>
</svg>
Could someone tell me how I can have an overlay on a background video without over laying any of the other components?
So I want to have the components be visible and be on top of the everything else and then have the background video be all the way in the background and then the texture on top and everything on top of the texture.
Note: I'm using the Bulma Framework on WordPress.
I'm using all native Bulma classes aside from defining the following for the texture class:
.hero .texture {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:15;
background:url('/wp-content/themes/bulmapress/src/images/texture.png');
}
This is the code structure:
<div class="hero-head">
<div class="first_nav">
<header id="header" class="nav-down">
<nav id="site-navigation" class="navbar container" role="navigation">
<div class="navbar-brand">
<?php bulmapress_home_link('navbar-item'); ?>
<?php bulmapress_blog_description('navbar-item is-muted'); ?>
<?php bulmapress_menu_toggle(); ?>
</div>
<div class="navbar-menu">
<div class="navbar-start"></div>
<?php bulmapress_navigation(); ?>
</div>
</nav>
</header>
</div>
</div>
<section class="hero main_hero is-fullheight video">
<div class="texture"></div>
<div class="hero-video">
<video poster="" id="bgvid" playsinline autoplay muted loop preload="auto">
<source src="/wp-content/themes/bulmapress/src/images/compressed.mp4" type="video/mp4">
</video>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="slider-content animated zoomIn pb-6">
<div>
<p class="title is-1 main-text">Semirsmajlovic.com</p>
<p class="subtitle is-4 main-text">Website is under construction :)</p>
</div>
</div>
<span class="scroll-down animated zoomIn">
<svg
width="30px"
height="100%"
viewBox="0 0 247 390"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
"
>
<path id="wheel" d="M123.359,79.775l0,72.843" style="fill: none; stroke: #fff; stroke-width: 20px;" />
<path
id="mouse"
d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z"
style="fill: none; stroke: #fff; stroke-width: 20px;"
/>
</svg>
</span>
</div>
</div>
</section>
Picture for example:
To achieve this you should do some additional CSS work.
.hero.video {
position: relative;
}
.hero.video .texture {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
color: white;
}
.hero.video .hero-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.hero.video .hero-video video {
width: 100%;
height: 100%;
}
.hero.video .hero-body {
position: absolute;
}
If you like to add some elements in div texture you're good to go but make sure to add some styling to them as well :).
Hopefully this does the trick for you!
I am creating a messaging system where one user speaks to the other. I have created message boxes with the arrows. So far all the boxes has arrows except one (see pics below). Also the height is not auto adjusting to the content. Can someone take a look at my code to see what is going on?
HTML
<div class="col-xs-7 live-chat-feed">
<div class="chat-date"><p>Friday 12:34</p></div>
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap(3).png"
srcset="img/bitmap(3)#2x.png 2x,
img/bitmap(3)#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Hey there! <br>
I noticed that not only are you a football fan
but you also go to a lot of games! What do you think about the upcoming season and who is your favorite team? Looks to me like you are a Pats fan!</p>
</div>
</div>
<div class="new-live-chat">
<div class="chat-date"><p>Saturday 22:40</p></div>
<div id="current-user">
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap-copy.png"
srcset="img/bitmap-copy#2x.png 2x,
img/bitmap-copy#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Wow! That’s awesome. I love football and im a beat writer for the Pats & have the luxury of catching their games!</p>
</div>
<div class="single-post-box">
<p class="chat-content">
What about you? Are you a Pats fan yourself?</p>
</div>
</div>
</div>
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap(3).png"
srcset="img/bitmap(3)#2x.png 2x,
img/bitmap(3)#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Oh yeah! Brady with the SB win again this year! </p>
</div>
</div>
<div id="current-user">
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap-copy.png"
srcset="img/bitmap-copy#2x.png 2x,
img/bitmap-copy#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Thats pretty cool! No idea how much of a Pats fan you were to already have season tix! I dont even have them yet!</p>
</div>
</div>
</div>
</div>
CSS
.live-chat-feed {
margin-left: 50%;
margin-top: -310%;
background-color: #000;
}
.new-live-chat {
margin-top: 20%;
}
.chat-avatar {
position: relative;
left: -30%;
top: 85px;
}
.chat-date,
.chat-content,
.time-posted {
color: #8785ab;
}
.chat-date {
position: relative;
left: 30%;
}
.single-post-box {
width: 729.9px;
height: auto;
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55);
margin-bottom: 10%;
padding: 20px;
}
#current-user .single-post-box {
position: relative;
left: -15%;
border-radius: 2px;
background-color: #1ac384;
box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55);
}
.single-post-box::after {
content: '';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-right-color: #fff;
right: 97.5%;
top: 115px;
}
#current-user .single-post-box::after {
content: '';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-left-color: #1ac384;
left: 100%;
top: 0px;
}
I always use height: inherit; for height property. It will create a box containing the the text without any free space at the bottom. So if you have like text of 3 rows it will create a height like 20% or something, if you have 6 rows, it will create height of 40%, etc. Hope that helps.
I have the following case:
but I would like that everytime and beta are displayed at the same vertical position as this:
I have the following html:
<h1 style="display: block;margin: 0 auto;position: relative;">
<svg enable-background="new 0 0 298.9 55.8" viewBox="0 0 298.9 55.8" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">.st0{fill:#231F20;}</style>
<path class="st0" d="..."></path>
</svg>
<p style="position: absolute;left: 85%;font-size: 50%;color: white;line-height: 0px;">beta</p>
</h1>
How can I solve this issue? Keep in mind that everytime should be centered, and beta should be to the right of it.
position: fixed
position: fixed;left: 85%
<html>
<head>
<style>
.vasile
{
display: inline-block;
line-height: 1px;
vertical-align: middle;
}
</style></head>
<body>
<div>
<h1 class="vasile"> asdasda</h1>
<p class="vasile">asdasda</p>
</div>
</body>
</html>
<p style="position:absolute; left:85%; font-size: 50%;color:#333; line-height: 0px; vertical-align: middle; display:inline-block; ">beta</p>