I am able to use the transition attribute to make the width of a div change smoothly when switching from mobile to desktop view. I have two separate pages, index and about. When the user goes to the about page, the width of the div increases. I would like to animate this but I am not sure how since they are on two separate pages.
This is for my personal blog, running Apache2. I've tried using the transition element when the a tag is hovered over but this didn't work and looked weird.
div.container {
position: relative;
top: 50px;
width: 350px;
margin: 0 auto;
border-radius: 5px;
background-color: #f5f5f5;
vertical-align: middle;
transition: width 0.25s;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
When going to a different html page there is no transition animation.
Related
I am trying to upload an image on our webpage (https://www.palousebicycle.org/team.html) so that the person's face isn't cut off, while keeping the others the same (it is the last image).
I tried inline html:
#staff2 {
border: 10px solid white;
width: 45%;
min-width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff img {
border-radius: 50%;
width: 228px;
height: 228px;
object-fit: cover;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff figure {
display: inline-block;
padding: 30px 40px;
text-align: center;
}
#nick {
position: absolute;
top: -30px;
left: -30px;
align: top, left;
}
<img "#nick" src="pictures/nick.jpg" alt="Nick" align="left,top">
as well as assigning an image #id (#nick) and using the CSS properties "align", "left", and "top".
I also tried using a frame on the picture to move it top-left, but I couldn't get the image in the right place to not show the frame.
We are a small nonprofit, and it's been awhile since I wrote the webpage, so forgive me for being a bit rusty, and probably not asking the question correctly. Please let me know any other information or files I can post, and thank you so much for any help! I really appreciate your time and assistance!
I would first suggest that you simply crop the image to a 228px by 228px square with the person centered appropriately in the image. That would give you the most control in terms of the way the image is cropped.
If you want to do it with css, you can do something like this:
#nick {
background-image: url(https://www.palousebicycle.org/pictures/nick.jpg);
background-size: 300%;
border-radius: 50%;
width: 228px;
height: 228px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="nick"></div>
Displaying the image with the background-image css property instead of with html <img> tag allows you to better control the way it is cropped. In this case, I just added a background-size: 300% which sized the background appropriately to fit the face in the circle.
Maybe you must replace ("#nick") to (id="nick") in img component.
I have a div with overflow: auto
.div {
overflow: auto;
}
and when i try to set the styles for the scrollbar, it doesnt work:
.div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
i tryed targeting with class, id, even the tag, but nothing works.
when i don't target anything before ::-webkit-scrollbar styles, the browser scrollbar acquires the styles, but i want to style the div scrollbar
I think you should use one of javascript plugin to display custom scroll bars. Not all browsers support that what you wrote in your question.
custom scrollbars examples
I have a screenshot of the form (its in pc view) as shown below which I have to replicate in HTML/CSS.
I have created the fiddle for the above screenshot.
Problem Statement:
(1) I am wondering what changes I need to do in the fiddle so that I am able to expand the width of the form as marked by arrow in the screenshot above.
I tried playing with the margin and padding of the form class as shown below but it didn't work.
Whenever I increase the padding of the form, the input fields inside the form seems to go all over the place.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
(2) Also, what changes I should make in the CSS, so that I can push the form (as marked with orange sign in the form) little bit towards the bottom.
Give the text input fields a width of 100% then you can use the paddings to control the size of the form elements.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 150px auto 100px auto;
padding: 0px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
input[type="text"] {
width: 100%;
}
Note that I've modified the .form styles a little bit.
In our website we have got this button:
Now we need to create link from that but without this tape on top of it.
The problem is that it also creates link in empty space (top left corner of tape).
What we tried
Make the tape straight and rotate it with CSS. It is quite good, except the thing that it is not supported in older browsers. Also it would be better to keep that link just in that white space (container div).
HTML
<div class="box-body buttons-text clearfix">
<a href="#">
<div class="tape"></div>
<img src="/images/fire.png" class="left">
<span>HOT JOB</span>
</a>
</div>
CSS
.box-body {
padding: 10px 20px;
position: relative;
background: #ffffff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.tape {
background: url("../images/tape.png") center 0 no-repeat;
width: 145px;
height: 54px;
position: absolute;
bottom: 46px;
left: 83px;
}
The problem is that it also creates link in empty space (top left corner of tape).
For modern browsers, you could use pointer-events:
.tape {
pointer-events: none;
}
You can use image map.
Use the button as an image.
Then use a correct image-map to define clickable area of the image.
As the title suggests I'm having an issue with an inset box shadow going underneath my H2 elements background, I need it to be above the element.
http://jsfiddle.net/9QYT4/
I've set the background image up to allow easy editing of the colors depending on pages of the site visited, any help on how to make the shadow appear above the h2 is appreciated, thanks!
Also, would it be possible to do something like this with a png gradient as well? That would be a better solution as I'm trying to only get the shadow on the right (but it's showing on the top and bottom as well)
SASS
#region-postscript-second {
width:300px;
background:#fff;
margin: 20px;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15);
h2 {
background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8CCC1B;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
color:#646567;
text-align:center;
}}
View the HTML on the JSfiddle, thanks!
I created pseudo after element that contains your shadow: http://jsfiddle.net/jPUX3/
#region-postscript-second:after{
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%; width: 14px;
box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25);
}
and to #region-postscript-second I added:
position: relative;
Here at the end is something about one side box-shadows - http://css-tricks.com/snippets/css/css-box-shadow/