First of all, I don't have any code yet, as I'm asking what's the best way to achieve this.
I'm developing a website which has an image on the left hand side that has a slight 3D rotation:
What I'd like to do is change it's perspective on window width change, until it's like flat:
The idea is that on desktop PCs the image is on the left with the rotation, while on narrower screen widths the image is turned flat.
I've considered using the following methods:
CSS sprite + CSS media queries:
I'm not really convinced about using this, as in this way I think that I will not have a sort of "moving" effect when the window is resized, unless I create a media query for every 5px and create a very long image to cut
CSS transform?
Not sure if it's possible to create a sort of 3D effect to an image using only CSS and change the 3D value on window resize without using the above mentioned method
jQuery plugin
I don't know if there's something that allows my to achive this as jquery plugin, any suggestion?
Parallax.js
I've never used parallax, but it seams like you can move elements on the screen in various way, do you think it will be possible to use parallax for what I need?
I Hope my question is clear enough, sorry again for no code, but this is still in proof-of-concept stage.
Please ask for any clarifications.
Thanks and have a good day.
You can achieve this functionality rather easily combining a few nifty properties of css3: perspective, the vw unit and media queries.
See this Jsfiddle for a quick demo, resize the viewport to see the changes.
body {
-webkit-perspective: 250px;
perspective: 250px;
min-width: 500px;
}
#media (min-width: 500px) {
body {
background: blue;
-webkit-perspective: 50vw;
perspective: 50vw;
}
}
#media (min-width: 700px) {
body {
background: red;
-webkit-perspective: calc(500vw - 3150px);
perspective: calc(500vw - 3150px);
}
}
img {
width: 400px;
height: auto;
transform-style: preserve-3d;
transform: rotateY(1rad);
}
<img src="http://i.imgur.com/qY1SdO0.jpg" />
Related
I have a carousel with six images that runs infinite using Nuka Carousel
And when i see the images on the page they are stretched on the width. After looking in the console i found that nuka slider class adds 100% width to images and disabling it fixes the images.
.slider-slide > img {
width: 100%;
display: block;
}
is there a way to disable the width so the images won't be stretched?
My solution is as follows. The images don't stretch in full screen.
img.your-class-name {
background-repeat: no-repeat;
min-width: 100%;
width: 100%;
height: 100%;
}
I had this for ages too. Really frustrating. I was using emotion and CSS Grid. So in my case I first made sure I got the demo working by doing this:
Make a component for the slider
Set up the demo code inside the component as is
convert CSS - In my case: import { css } from "react-emotion", then convert the style={{ tags into className={css`
add a view-port based limit using the %vw; in my case I have a 5% gutter down the side so I limited to 90vw (90% of viewport), as follows
<div className={css`
width: 90vw;
margin: auto;
`}>
<Carousel>
// demo code
</Carousel>
Depending on your libs and surrounding css, you will need to vary this approach. I am basically making sure the CSS is all processed at the same time, by the same tool, so it's not compiled in some weird order. Then I'm limiting the div width that contains the carousel. It's twitchy AF - I broke it several times by adding unrelated CSS - and I'm using emotion which prefixes CSS, so it made no sense but hey, that's the joy of CSS.
I'm using intro.js to guide users through my application the first time they log in. It's a great tool and it works, the only downside I see is that the introjs-tooltip element is not responsiv.
As you can see below the tooltip has a min-width and max-width in px which really don't make it very responsiv. Also this makes the image I include in some of the steps really small and kind of useless, because of the small size.
CSS - Simplyfied
.introjs-tooltip {
position: absolute;
visibility: visible;
padding: 10px;
min-width: 200px;
max-width: 300px;
}
I have been working on this "issue" for a few days now, and can't figure it out.
So my questions are: Is there a way to make the tooltip use % instead of px without having to change to much in the intro.js file? If not, what would you guys recommend me to do?
You can provide own implementation for .introjs-tooltip in your custom css file:
.introjs-tooltip {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
or you can use an additional class eg: .tooltip-large:
HTML
<div class="introjs-tooltip tooltip-large">
...
</div>
CSS
.tooltip-large {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
In my case, "min-width" and "max-width" css rules are not working as expected, at least for floating tooltips in a responsive desing. In ended up doing the following. Maybe this is helpful for someone (tourTooltip is a custom class I defined for tooltips):
/* Size < Small */
#media screen and (max-width: 756px) {
.tourTooltip {
min-width: 300px;
}
}
/* Size > Small */
#media screen and (min-width: 756px) {
.tourTooltip {
min-width: 500px;
}
}
I'm quite new to web-design, but know most of the basic stuff, but please try to keep it relatively simple) So, I'm designing a web-site, where I want to have grey background on the sides of the main page, which I managed to do. However, I want the page to "eat up" the grey space if the window is resized, just like Marriott hotel uses I have tried looking their code up, but it's a lot and I don't think they use CSS but JavaScript for resizing dynamics. Am I right? If so, is there a way of doing it with CSS? Or java, but relatively simple, I'm very new to it!
Also, I have currently given the wrapper a width of 88% and used the 12% as the grey background. Is using % the best solution for different screen resolutions? (Keeping in mind that it would be for PCs and tablets at the most, no smartphones)
Using percentages can be useful, but if you truly want things to look how you want them to on a smaller screen resolution, you can use media queries.
Media queries work well because they can even change the styles depending on device orientation:
#media (min-width: 700px) and (orientation: landscape) { ... }
Using a media query. (Make the window bigger & smaller to see it in action.)
I think what you want is the following:
Add a background to the body.
Add a div with X px and margin auto, that will center it.
So then, when you resize the window, this will "eat" the margins from the body hidding the grey background.
If what you want is different sizes for the web depending on the width screen, then you are entering to media queries.
You are looking for:
#wrapper { width: 900px; margin: 0 auto; }
This will place your wrapper (with a 900px width) with even margins on the side and then recalculate the margins as the window changes.
I would give your wrapper a set width since setting a width of 88% means that the center content will ALWAYS be 88% of the window which means you will always have margins.
You may do it this way
here is the fiddle: http://jsfiddle.net/fcvbkv5w/
body {
text-align: center;
}
#navbar {
width: 100%;
margin-left:0%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 70%;
position: relative;
text-align: center;
background-color: red;
}
#media (max-width: 700px){
#fwcenter{
width:100%;
}
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="container">
Website content
</div>
</div>
</center>
</div>
So while working on my FAQ page, I figured I would try and create a stylish header. The problem is now, that I have it, I have no idea how to snap it to the sides of the browser (if that's even plausible).
What I was wondering if either CSS or JavaScript would help with taking this image: (http://files.enjin.com/503205/FAQWelcome.png) and setting it to a 50-75% height (depending on how it looks) and snap it to the web browser so that the smaller the web browser gets, the smaller the image gets so it maintains the same look in any browser.
I was also wondering if it is possible so that a boatload of pure HTML text could follow the same pattern of expanding and collapsing perhaps?
I'm way too new to CSS but I have an intermediate understanding of how to make it work. I want to be able to create a clean, fluid website that's enjoyable to visit.
Edit: I'm using module placement for this one as Enjin won't support the edit of full-website CSS but rather HTML modules.
Here's a Fiddle in this example image is set as body background
body {
background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
}
#media all and (max-width:960px) {
body {
background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
background-size: auto 300px;
}
}
#media all and (max-width:600px) {
body {
background: #f8f8f8 url(http://files.enjin.com/503205/FAQWelcome.png) top center no-repeat;
background-size: auto 200px;
}
}
To get responsiveness you must use CSS media queries, with media queries you target screen size and by screen size you're setting appropriate CSS properties.
Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.
Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.
I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.