I am trying to make my own alert for my stream and for that I need to get the text from streamlabs (i think getElementById will work) and then I have to fade the text (or the entire HTML tag) from left to right.
I can make the text fade away by using CSS but I can t make it like this image.
What should I do?
you can use this, If need more help tell me.
.image-border{
position: fixed;
width: 100vw;
height: 50vh;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: gray;
display: block;
}
.image-text-center{
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
height: 100%;
font-size: 25px;
}
.image-text-center::after{
content:'';
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 25px; /* size of font-size text parent */
background-color: gray;
transition: all 2500ms linear;
box-shadow: 8px 0 15px 10px gray;
}
.image-border:hover .image-text-center::after{
width: 100%;
box-shadow: 0 0 0 0 gray;
}
<div class="image-border" >
<div class="image-text-center">HELLO WORLD!!</div>
</div>
I appreciate if my answer helps you ,accept and vote up it;
Related
I want to show a percentage number above the slider as below picture but I don't want any jQuery or another js libraries to work with. I have some blocks, what should I add to the blocks I wrote. How to achieve the slider as in the expected output?
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.middle {
width: 50%;
max-width: 500px;
}
.slider-container {
position: relative;
}
/* .slider-container .bar {
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 7px;
borer-radius: 5px;
background-color: red;
} */
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
margin: 0;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: #1D2A78;
}
.slider-container .slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
background-color:#1D2A78;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
transform: rotate(135deg);
}
<div class="middle">
<div class="slider-container">
<span class="bar"><span class="fill"></span></span>
<input type="range" id="slider" class="slider" min=0 max=100 value=50>
</div>
</div>
you can create a div with flexbox layour (space between will help you) - inside that div add your 4 small bubbles (divs), (border radius: 50% - for circling divs).
remember to make the z-index above your input.
btw its not a react question - its more a css one.
i wanted to create a parallax, it display very well on android but when i open it on iphone or ios tablet the backgroun image dissapear. There is no problem on android or windows device. How can i fix this any idea and also when i click dropdown on android the dropdown menu works but on ios device it is not working. Here is domain. gokkar.com have a nice days thx
.parallaxSet{
background-attachment: fixed;/*background-size: 2261.76px 1178px;*/background-position: 50% -103.564px;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
<div class="parallax background section-height parallaxSet" style="background-image: url(assets/images/banner2.jpg);" data-diff="200">
<div class="parallax-wrapper">
<div class="parallax-scroll">
<div class="lastline">
<h5>GÖKKAR KURUMSAL</h5>
<h6>‘‘Şirketimiz 22 Aralık 1995 tarihinde kurulmuştur. 5 Ocak 1996 tarih ve 3951 sayılı Ticaret Sicili Gazetesi’nde yayımlanarak tescil edilmiştir.’’</h6>
İncele
</div>
</div>
</div>
</div>
<style>
.parallax {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
margin: 50px 0 0 0;
position: relative;
}
.parallax:after {
bottom: 0;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 60px;
margin-left: -60px;
z-index: 250;
}
.parallax.overflow,
.parallax.overflow .parallax-wrapper {
height: auto;
min-height: 100%;
}
.parallax.background {
background-repeat: no-repeat;
background-position: 50% 50%;
background-position: 50% 50%\9 !important;
}
.parallax.section-height {
height: 400px;
}
.parallax-wrapper {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}
.parallax-scroll {
display: block;
position: relative;
}
.lastline {
width: 60%;
display: block;
margin: 5px auto 50px auto;
text-align: center;
padding: 100px 0;
}
.lastline > h5 {
font-size: 50px;
font-weight: 700;
color: #fff;
margin: 0;
padding: 0;
}
.lastline > h6 {
font-size: 20px;
font-weight: 100;
color: #fff;
margin: 25px 0;
}
.lastline > a {
width: 300px;
height: 55px;
display: block;
line-height: 50px;
font-size: 20px;
margin: 35px auto;
border: 1px solid #fff;
background: #fff;
color: #000;
font-weight: 500;
text-align: center;
}
.lastline > a:hover {
background: none;
color: #fff;
}
</style>
You are changing your header from fixed to position: static on devices with max-width: 800px
change:
#media screen and (max-width: 800px)
header {
height: auto;
position: static;
overflow: hidden;
border-bottom: 1px solid #eee;
display: block;
}
To:
position: fixed;
You will also have to add some margin top so the background image doesn't sit under the header.
IOS deactivated the "background-attachment:fixed" feature to reduce the costs on mobile devices.
Your only option is to use background-attachment:scroll. That dosen't the same effect as you wanted but you could do a workaround with some JavaScript as you can see here
The better way:
Use a Media Query and show a Single image with a fixed position.
Trying to figure out how to create a gap in a CSS left border around an image via CSS or JavaScript/jQuery.
I've found several answers how to do this with a gap on the top or bottom border, but couldn't figure out how to apply this to a left border.
Here (https://ibb.co/cGS0vk) is an image of what I try to achieve.
Here is my HTML so far:
<div class="frame">
<img class="quote" src="quote.jpg">
<h2>Heading<h2>
<p>Lorem ipsum<p>
</div>
And here is the CSS:
.frame {
Border-top: 10px sloid grey;
Border-right: 10px sloid grey;
Border-bottom: 10px sloid grey;
}
.quotes {
position: relative;
right: 100px;
}
You can do it by using pseudo elements like :before and :after.
.box {
position: relative;
overflow: hidden;
width: 100px;
height: 50px;
border: solid #000;
border-width: 5px 5px 5px 0;
}
.box:before,
.box:after {
content: '';
position: absolute;
background: #000;
height: 30%;
width: 5px;
top: 0;
left: 0;
}
.box:after {
top: auto;
bottom: 0;
}
<div class="box"></div>
Best idea I can come up with using minimal amount of requirements:
Use the ::before/::after pseudo elements to place a background-color-matching element over top of an existing border. This essentially "slices" part of your border away.
HTML:
<div class="wrap">
<div class="box"></div>
</div>
CSS:
.wrap { position: relative; width: 300px; height: 300px; background-color: #fff; }
.box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 200px; border: 10px solid #8af; }
.box::before { content: ''; position: absolute; width: 10px; height: 100px; margin: auto; left: -10px; top: 0; bottom: 0; background-color: #fff; }
JSFiddle: https://jsfiddle.net/gam9s0mz/
Edit As noted, this method wouldn't work well with a background image. But only with solid background color matching.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
I am trying to centre a DIV which contains a form. I have managed to grey out the back ground and would like to centre the form within the window. Below is what I have done so far, but I do not know how to progress it further to get the result that I need.
I am able to 'auto margin' horizontally, but I am not able to do this vertically (please see image). If you stretch the browser window further vertically, the form stretches to occupy all of the vertically space.
#idOfForm{
margin: auto;
z-index: 10000;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
This is how you can center elements easily:
Suppose you have the following:
<div class="aaa">
fsdfsd
</div>
Use the following css:
.aaa {
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
}
Here is jsfiddle: https://jsfiddle.net/ffnvjz4q/
This is the code you need:
#idOfForm{
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
What browsers does your 'app' must support ? The easiest way to achieve this is using CSS flexbox but it is not fully support yet
http://caniuse.com/#search=flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
<div class="modal">
<div class="modal-body">
<!-----put your form code here --->
</div>
</div>
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.modal-body {
position: relative;
max-width: 500px;
width: 100%;
margin: 50px auto 20px;
background-color: #fff;
min-height: 50px;
}
You could try
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
I have a custom dropdown box in mootools slider as per below image. This slider contains three div, that auto rotate in vertically one by one. Slider’s and custom dropdown’s javascript and css described below. My problem is that, when I put dropdown into slider div that hide behind slider div as per below image. According requirement, I can’t changed dropdown position and not increase slider height, then how to display dropdown list items on top off slider. Any suggestion will be appreciated.
Now you can see above image Per Unit Cost drop down list is hiding behind slider container.
Slider mootools
http://code.google.com/p/locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js
http://mootools.net/download/get/mootools-1.2.4.js
http://cnetjavascript.googlecode.com/files/mootools.svn.js
<script type="text/javascript">
var _lofmain = $('lofslidecontent45');
var _lofscmain = _lofmain.getElement('.lof-main-wapper');
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
var object = new LofFlashContent(_lofscmain,
_lofnavigator,
_lofmain.getElement('.lof-navigator-outer'),
{ fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
interval: 3000,
direction: 'vrdown'
});
object.start(true, _lofmain.getElement('.preload'));
var isCustom = "#(ViewBag.IsCustom)";
if (isCustom == "True") {
object.callMyEvent(2, true); // call my custom event
object.setNavActive(2);
}
Slider CSS
/* CSS Document */
.lof-slidecontent
{
margin-left: 0px;
position: relative;
overflow: hidden;
width: 1200px;
height: 486px;
}
.lof-slidecontent .preload
{
height: 100%;
width: 100%;
background: #FFF;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #FFF;
text-align: center;
}
.lof-slidecontent .preload div
{
height: 100%;
width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
}
/* main flash */
.lof-main-wapper
{
margin-right: auto;
overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
padding: 0px;
height: 488px;
width: 1014px;
position: relative;
overflow: hidden;
}
.lof-main-wapper .lof-main-item
{
padding: 0px;
margin: 0px;
height: 488px;
width: 100%;
position: absolute;
}
.lof-main-wapper .lof-main-item img
{
padding: 0px;
width: 100%;
}
.lof-main-item-desc
{
z-index: 100px;
position: absolute;
top: 150px;
left: 50px;
width: 400px;
background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p
{
color: #FFF;
margin: 0 8px;
padding: 8px 0;
}
.lof-main-item-desc h3 a
{
color: #FFF;
margin: 0;
font-size: 140%;
padding: 20px 8px 2px;
font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif;
}
/* item navigator */
ul.lof-navigator
{
top: 0px;
padding: 0px;
margin: 0px;
position: absolute;
width: 100%;
overflow: hidden;
}
ul.lof-navigator li
{
cursor: hand;
cursor: pointer;
list-style: none;
width: 100%;
padding: 0px;
margin: 0px;
}
.lof-navigator-outer
{
position: absolute;
right: 0;
top: 0px;
z-index: 100;
height: 488px;
width: 204px;
padding: 0px;
margin: 0px;
float: left;
}
.lof-navigator li.active
{
background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat;
background-color: #d21c1c;
color: #FFF;
}
.lof-navigator li:hover
{
}
.lof-navigator li div
{
text-align: center;
height: 162px;
position: relative;
margin-left: 0px;
padding-left: 0px;
background-color: #FFFFFF;
}
.lof-navigator li.active div
{
}
.lof-next
{
position: absolute;
top: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-previous
{
position: absolute;
bottom: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-navigator-MycontentHeader
{
font-family: Caecilia LT Std;
font-size: 26px;
color: #d21c1c;
}
li.active .lof-navigator-MycontentHeader
{
color: #FFF;
}
.lof-navigator-MycontentFooter
{
font-family: TradeGothic, Arial;
font-style: oblique;
font-size: 13px;
color: Black;
}
li.active .lof-navigator-MycontentFooter
{
color: #FFF;
}
Drop down
http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML
Thanks in advance!
If some content can't be shown in HTML it's usually due to overflow:hidden css attribute set on one of it's parents.
It's seems that is what your problem is - try to remove the overflow hidden of the parent element that contains the dropdown element.
If you need that overflow:hidden then there are other ways to create that effect so it really help if you publish your full code using http://jsfiddle.net/ or something else...
Can you put the slider in an iframe? There might be a more sophisticated remedy, but that always works.