Trying to adjust the height and width of the modal, however without any luck.
I have tried:
max-height: 80vh; //
&
#media (min-width: 769px) {
.modal-dialog {
width: 1024px;
margin: 30px auto;
&
max-height: 100px;
max-width: 100px;
All do very "strange" things to the modal. I.e move it to the left of the screen and don't actually make it bigger. Here's my CSS for the modal:
modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: #EBEAEA;
border: 1px solid #999;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: 0;
max-height: 100px;
max-width: 100px;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}
.modal-header {
padding: 20px;
border-bottom: 1px solid transparent;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.5384616;
}
.modal-body {
position: relative;
padding: 20px;
}
.modal-footer {
padding: 20px;
text-align: right;
border-top: 1px solid transparent;
}
Any pointers in the right direction would be helpful.
jsFiddle: https://jsfiddle.net/tms9vz0k/1/
Thank you!
Try this css.
#media (min-width: 992px){
.modal-dialog {
width: 1024px !important;
margin: 30px auto;
max-width: 1024px !important;
}
}
Related
I have an absolutely positioned CSS banner that has a responsive width and height based on viewport size. The element is centered on desktop and tablet devices, but not on mobile (when the banner's width starts to shrink).
I can't use the classic margin: 0 auto; trick because the margins have to be set to a fixed value for the banner to work.
The code is below:
HTML:
<h1 class="banner">A Simple CSS Banner</h1>
CSS:
#import url(https://fonts.googleapis.com/css?family=Rye);
body
{ background: #eee; }
.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
max-width: calc(100% - 150px);
height: 60px;
border: 1px solid #8a1;
font: normal 30px/60px 'Rye';
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}
.banner::before,
.banner::after {
content: '';
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
Link to working codepen: https://codepen.io/Adam0410/pen/QZOKdV
Thanks for the help!
Check if this helps you.
#import url(https://fonts.googleapis.com/css?family=Rye);
body {
background: #eee;
}
.banner {
position: absolute;
left: 50%;
transform: translate(-50%);
display: block;
margin: 100px 0;
width: 400px;
max-width: calc(100% - 150px);
min-height: 60px;
}
.banner span {
display: block;
position: relative;
z-index: 1;
border: 1px solid #8a1;
font: normal 30px/60px "Rye";
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.banner::before,
.banner::after {
content: "";
position: absolute;
z-index: -1;
left: -70px;
bottom: -24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
min-height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
<h1 class="banner"><span>A Simple CSS Banner</span></h1>
You can simply use Media queries and adapt Width and margin.
something like:
media (max-width: 475px) {
.banner{
width: 200px;
margin:100px -100px;
}
}
This way you keep the top and bottom margin:
left: 0; right: 0;
margin: 100px auto;
If you want to center an absolute or fixed element you should :
position: absolute;
left: 0%;
right:0%;
margin: 0 auto;
Is it possible to add image as box shadow, for example to put image with dots instead of standard shadow?
https://i.stack.imgur.com/DOJGh.png
or somehow to replace shadow from picture with dots?
to get effect like this on picture down here
http://prntscr.com/fvjnht
Did you want something like this? It's not exactly box-shadow, but it imitates it.
You can set whatever image you like as a background for .image::after.
html, body {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.contain {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image{
position: relative;
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
}
.image::after {
content: '';
background: linear-gradient(to bottom, #333, red);
position: absolute;
width: 100%;
height: 100%;
bottom: -10px;
right: -10px;
z-index: -1;
}
<div class="contain">
<div class="image"></div>
</div>
I think this is exactly what you are looking for:
body {
background: black;
}
#logo {
width: 200px;
height: 200px;
display: block;
position: relative;
}
#logo::after {
content: "";
background: url("https://rfclipart.com/image/big/3f-a9-1a/red-dotted-halftone-background-Download-Royalty-free-Vector-File-EPS-183199.jpg");
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 50%;
z-index: -1;
}
img {
width: 90%;
height: 90%;
padding: 5%;
display: block;
float: left;
border-radius: 50%;
box-shadow: 0px 0px 40px #ccc;
-moz-box-shadow: 0px 0px 40px #ccc;
-webkit-box-shadow: 0px 0px 40px #ccc;
}
<div id="logo">
<img src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-
shadow/256/User-icon.png" alt=""/>
</div>
Kind of like this?
.image_carousel img {
margin-right: 14px;
display: block;
float: left;
box-shadow: 3px 3px 1px #ccc;
-webkit-box-shadow: 3px 3px 1px #ccc;
-moz-box-shadow: 3px 3px 1px #ccc;
}
<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>
Credit goes to Joseph Marikle.
Like this?
span {
border: 2px dotted red;
display: inline-block;
}
img {
padding: 0;
margin: 0;
display: block;
}
<span class="dotted-border"><img src="http://placehold.it/200"/></span>
See this image
Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE )
How can i achieve this ?
in details :-
A div with 2px red border.
that div contains 2 buttons with inline block.
one is on left side and other one is at right side of DIV.
LIKE : [BUTTON1][BUTTON2]
but i want this :- [BUTTON1\BUTTON2]
a Slash style shape between both buttons.
i have tried
#M_Left {
width: 0;
height: 0;
margin: 0 !important;
padding: 0 !important;
display: inline-block;
border-top: 100px solid #3fc2ff;
border-right: 50px solid transparent;
border-left: 400px solid #3fc2ff;
color: #fff;
text-align: center;
}
#M_Right {
width: 0;
height: 0;
margin-left: -40;
border-bottom: 100px solid #3fc2ff;
display: inline-block;
border-right: 400px solid #3fc2ff;
border-left: 50px solid transparent;
color: #fff;
text-align: center !important;
}
.white_M {
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
display: inline-block;
min-width: 400px;
border-width: 0 !important;
border-style: none !important;
color: #3fc2ff !important;
}
.M_Container {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
display: inline-block;
border: 2px solid #3fc2ff;
}
<div class="M_Container">
<div id="M_Left"> HEY</div>
<div id="M_Right" class="white_Mx"> </div>
</div>
Please help me
Thank you in advance
You can create it by using following approach
$('button').click(function() {
$(this).addClass('current').siblings().removeClass('current');
});
.buttonGroup {
display: flex;
border: 1px solid skyblue;
/* Border color change as your need */
overflow: hidden;
border-radius: 5px;
max-width: 350px;
}
button {
flex: 1;
background: none;
border: none;
outline: none;
padding: 5px;
cursor: pointer;
position: relative;
}
button:hover:before {
background: skyblue;
}
button:hover:after {
background: skyblue;
}
button.current:before {
background: skyblue;
}
button.current:after {
background: skyblue;
}
button:before {
content: '';
width: 100%;
height: 100%;
background: #fff;
position: absolute;
transform: skewX(-25deg);
left: -5px;
top: 0;
z-index: -1;
}
button:after {
content: '';
width: 100%;
height: 100%;
background: #fff;
position: absolute;
transform: skewX(-25deg);
right: -5px;
top: 0;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonGroup">
<button>Hello</button>
<button>Bye</button>
</div>
Try this.
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
})
.wrap {
white-space: nowrap;
font-size: 0;
border: 2px solid navy;
display: inline-block;
overflow: hidden;
}
button {
border: 0;
background: #fff;
padding: 10px 20px;
position: relative;
outline: 0;
cursor:pointer;
}
button:after,
button:before {
content: '';
position: absolute;
transform: skewX(-25deg);
height: 100%;
width: 10px;
background: #fff;
top: 0;
z-index: 1;
right: 0;
}
button:before {
right: auto;
left: 0;
}
button.active {
background: blue;
color: #fff;
}
button.active:after,
button.active:before {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<button>Button</button>
<button class="active">Active</button>
</div>
I made a modal and it does not do the transition effect when I apply a background-color to my #main div which contains all the content, after removing the background the modal does do the transition effect and disappears slowly.
To ge the modal just click on register on the top navbar.
Live demo for the modal along with the background-color on #main:
http://79.179.201.217/
Live demo for the modal long without the background-color on #main:
http://79.179.201.217/test.php
Just to note that the following under #main causes the issue.
background-color: #eee;
CSS:
#main {
width: 85%;
max-width: 875px;
margin: 70px auto;
border-radius: 5px;
padding: 15px;
z-index: -600;
background-color: #eee;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: -500;
transition: opacity 0.18s linear, transform 0.18s linear;
transform: scale(1.4);
opacity: 0;
}
.modal-close {
display: block;
color: #555;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 6px;
right: 20px;
}
.modal-content {
display: block;
margin-top: 10px;
}
.modal-container {
display: table;
margin: 220px auto;
position: relative;
border: 1px solid #eee;
background-color: #eee;
padding: 25px;
border-radius: 3px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
}
.modal-container.x2 {
width: 80%;
max-width: 200px;
}
.modal-container.x3 {
width: 80%;
max-width: 300px;
}
.modal-container.x4 {
width: 80%;
max-width: 400px;
}
.modal-container.x5 {
width: 80%;
max-width: 500px;
}
.modal-container.x6 {
width: 80%;
max-width: 600px;
}
.modal-container.x7 {
width: 80%;
max-width: 700px;
}
.modal-container.x8 {
width: 80%;
max-width: 800px;
}
.modal-header {
margin-bottom: 20px;
border-bottom: 1px solid gray;
font-size: 18px;
color: #555555;
font-weight: 500;
text-transform: uppercase;
}
.modal.modal-visible {
opacity: 1;
z-index: 1000000;
transform: scale(1.0);
}
I am trying to achieve the below using pure CSS, is it possible? If I can figure out a way to hide the bottom part to the top of the bottom rounded corner that would work. But I am lost at what would work...
.ribbon, .ribbon * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ribbon {
width: 600px;
margin: 40px auto 10px;
padding: 0 10px 4px;
position: relative;
color: black;
background: #eee;
}
.ribbon h3 {
display: block;
height: 40px;
width: 620px;
margin: 0;
padding: 5px 10px 5px 30px;
position: relative;
left: -30px;
color: white;
background: rgb(193,0,0);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: 10;
left: 0;
}
.ribbon.round h3 {
border-radius: 10px 0px 0px 0px;
}
.ribbon.round h3::before {
width: 20px;
height: 30px;
bottom: -20px;
border: none;
background: rgb(61,0,0);
border-radius: 10px 0px 0px 10px;
}
Fiddle to what I have currently
http://jsfiddle.net/yoderman94/Gdgwq/
Simply make your z-index value negative:
.ribbon h3::before {
z-index: -1;
}
That will place it under the heading.
To keep the rounded top, add another block with lower z-index, and fill it with the same background as the heading:
Example: http://jsfiddle.net/K7e96/
Here's a new fiddle, its like 99% there (only tested in Chrome), need to play with the shadows a bit more. http://jsfiddle.net/jrTAA/2/
.ribbon.round h3 {
border-radius: 5px 0px 0px 0px;
}
.ribbon.round h3::before, .ribbon.round h3::after {
width: 20px;
height: 8px;
bottom: -8px;
border: none;
border-top:2px solid rgb(193,0,0);
border-left:1px solid rgb(193,0,0);
border-bottom:1px solid rgb(193,0,0);
background: rgb(61,0,0);
border-radius: 5px 0px 0px 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 2px 1px 2px rgba(0,0,0,0.3);
}
The fiddle:
http://jsfiddle.net/aleation/gCrhQ/
The code:
.ribbon, .ribbon * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ribbon {
width: 600px;
margin: 40px auto 10px;
padding: 0;
position: relative;
color: black;
background: #eee;
}
.ribbon h3 {
display: block;
height: 40px;
width: 100%;
margin: 0;
padding: 9px 0 0 10px;
color: white;
background: rgb(193,0,0);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before,
.ribbon p::before{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: 10;
left: 0;
width: 14px;
}
/* Round */
.ribbon.round h3::before{
height: 45px;
top: 0px;
left: -14px;
border: none;
background: rgb(193,0,0);
border-top-left-radius: 7px 4px;
}
.ribbon.round p::before{
height: 7px;
top: 40px;
left: -14px;
border: none;
background: rgb(61,0,0);
border-top-left-radius: 7px 4px;
border-bottom-left-radius: 7px 4px;
}
.ribbon p{
margin: 0;
padding: 20px;
}