I have been trying to get a success message to appear on the center of my website.
What I tried applies to all the website except from a sector called "featured products."
When adding something to my wishlist the message appears to be "following" the product rather than being in the middle of the screen and fixed.
I attach a screenshot for details.
CSS Code
.flag-message {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
line-height: normal;
text-align: center;
font-size: 17px;
width: 400px;
vertical-align: middle;
/* height: 170px; */
background-color: rgba(68, 68, 68, 0.72);
color: #ffffff;
box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.38);
padding: 25px;
border-radius: 5px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.13);
font-family: 'Calibri', sans-serif;
/* font-weight: 700; */
z-index: 9999949;
}
Have you considered that your "product" may have position:relative, so that your top: 50% and left: 50%, is following relatively to your product rather than your wrapper/site?
Related
Hi even though I have some experience with C# I have very little experience with any languages related to web development hence my question is probably going to seem very noobish.
I'm wanting to add an animated progress bar on my WordPress site for an opt-in form and I can't find any suitable plugins but I came across this CSS tutorial:
https://css-tricks.com/css3-progress-bars/
And downloaded its code example:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
*
{ margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap { width: 490px; margin: 80px auto; }
body { background: #333; text-align: center; color: #eee; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
h1 { font-size: 42px; font-weight: 600; margin: 0 0 30px 0; }
pre {
background: black;
text-align: left;
padding: 20px;
margin: 0 auto 30px auto;
}
Anyway my question is how can I add that code to a very specific place on my opt-in form if someone explains how I can add it on a specific part of a page hopefully I can figure it out from there.
I don't know what this code is classed as, as I know where to add CSS code for a page but now what this code does or where to put it exactly hopefully that all made sense.
You can add this to your HTML but you need to write a logic for increasing the width which is the progress bars percentage. You can write javascript for it.
<div class="meter">
<span style="width: 55%"></span>
</div>
<style> /* adding css here */
.meter {
height: 20px; /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>
Is it possible to use CSS to reproduce the shadow under the device of the below image?
The following CSS and different variants don't work:
filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);
The problem is concentrating the shadow under the device and flattening it. The CSS above cannot make the shadow appear as if it's projected on the ground.
Codepen: https://codepen.io/Crashalot/pen/MWYzoJV
A pseudo element is better suited to get this done, see below example:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
}
.object:before {
content:"";
z-index: -1;
position: absolute;
bottom: -50%;
width: inherit;
height: inherit;
border-radius: 40%;
background: rgba(0,0,0,.55);
transform: scaleX(1.3) scaleY(0.12);
filter: blur(5px);
}
<div class="object"></div>
Alternatively, you can use box-shadow:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
/* This is .shadow-lg from tailwindCSS */
/* See https://tailwindcss.com/docs/box-shadow/ */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
<div class="object"></div>
How would I achieve this look without images/paths?
I need text with a thick border, and a shadow that won’t show through transparent text.
I have already tried normal text-shadow, but it didn’t work the way I needed.
I tried using an SVG, but it didn’t provide the flexibility I needed, and same for images.
* {
box-sizing: border-box;
font-family: inherit;
}
html {
font-size: 62.25%;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
background: linear-gradient(to right, rgb(0, 128, 111), rgb(199, 189, 57));
}
h1 {
background: transparent;
color: transparent;
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
text-shadow: 3px 3px 0 rgb(54, 54, 54);
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: rgb(0, 0, 0);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
<h1>Hello World</h1>
I have a span which contains ellipses and i want to show the content through tooltip, but the position of the tooltip isn't seem to adjust as i can't apply position relative to the parent (due to ellipses). Here's the code i've tried
.data-tooltip:hover:before{
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
position: absolute;
bottom: 82%;
left: 25%;
-webkit-transform: translate(-58%, 41.5%);
transform: translate(-58%, 51.5%);
}
.data-tooltip:hover:after{
content: attr(data-title);
padding: 6px 8px;
color: #fff;
text-align: left;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
min-height: 32px;
word-wrap: break-word;
position: absolute;
top: unset;
bottom: 75%;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
<span class="data-tooltip" data-tooltip="my tooltip">
ellipsed content
</span>
Here i am using 'before' for tooltip arrow and 'after' for tooltip content, but their positions doesn't seem to adjust either.
i have tried positioning my data-tooltip content relative, but due to overflow:hidden, the tooltip cuts outside the box.
An example below...
This code quoted from Chris Bracco. Please look at this article for detail.
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<p style="margin-top:50px">
<span data-tooltip="I’m the tooltip text.">I’m a span with a tooltip.</span>
</p>
Instead of
data-tooltip="my tooltip"
Your data-tooltip attribute should be data-title
That should work now.
I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".
.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}
https://codepen.io/hubkubas/pen/dmJjWB
Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.
Here is a quick-fix that probably shows the type of shadow you want:
/* btn */
.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}
.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}
.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}
#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"></i></button>
<div id="shadow">
</div>
(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).
You can learn more about how to create custom shadows on this link.