I am trying to edit a squarespace gallery to make the native fade animation a slower transition, since it snaps very quickly. I had found code that would do this and make the images fade slower, however it seems to work very infrequently/randomly. This is the code that has gotten me closest to what I want to achieve
.gallery-fullscreen-slideshow-item-img{
transition: opacity 1600ms ease-in-out !important;
-webkit-transition: opacity 1600ms ease-in-out !important;
-ms-transition: opacity 1600ms ease-in-out !important;
-moz-transition: opacity 1600ms ease-in-out !important;
-o-transition: opacity 1600ms ease-in-out !important;
}
.gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
transition: opacity 1400ms ease-in-out !important;
-webkit-transition: opacity 1400ms ease-in-out !important;
-ms-transition: opacity 1400ms ease-in-out !important;
-moz-transition: opacity 1400ms ease-in-out !important;
-o-transition: opacity 1400ms ease-in-out !important;
}
site:
www.brm-designs.com
pw: BRM123
if anyone has an explanation as to how to fix this or why this won't work i would appreciate the help. Thank you!
Related
I have an Ion Content, I need to put a background image there with 50% Opacity.
My welcome component html
<ion-content>
<ion-grid>
<ion-row>
...
My welcome component scss
ion-content
{
--background: url(splash1.png) no-repeat center center / cover;
--background-opacity: 0.5;
}
The Background Image is shown, but there is no opacity. How I can fix it? I user Ionic v6 with Angular
use css shadow part background:
ion-content
{
--background: url(splash1.png) no-repeat center center / cover;
}
ion-content::part(background)
{
opacity: 0.5;
}
I want my modal to have a content (image), and a transparent background, but I can't achieve the transparent background, I will appreciate if you can help me.
Thank you very much!
Ionic CLI: 6.19.0
Ionic Framework: #ionic/angular 6.0.4
global.scss
.modal-answer .modal-wrapper {
--background: transparent !important;
margin: 0 auto;
height: 40%;
top: 30%;
width: 70%;
display: block;
}
game.ts
const modal = await this.modalController.create({
component: ModalAnswerPage,
cssClass: 'modal-answer',
componentProps: {
answe: this.ok_bad_time,
back_g: this.color_backg_modal_ answer'
}
});
return await modal.present().then(_ => {
});
modal-answer.page.scss
ion-content{
--background: transparent;
}
Remove your ion-content from you modal html. It inherit the background color from the component where you open the modal.
in you global.css :
ion-modal {
--background: transparent !important;
}
If this approach doesn't work, then instead you can add opacity to Modal parent element. For example :-
Modal component code :-
<div padding class="mainContent">
<div no-margin margin-top class="feedbackCard">
</div>
</div>
Here mainContent is complete page (transparent bg) and feedbackCard is the subpart (having white bg) and below is the CSS for above component
.mainContent {
flex: 1;
background-color: rgba(0, 0, 0, 0.3) !important;
justify-content: center;
align-content: center;
align-items: center;
display: flex;
}
.feedbackCard {
width: 100%;
border-radius: 4px;
background-color: white;
}
And you can open Modal using below code.
const modal = await this.modalCtrl.create({FeedbackComponent, 'backTransparent', {}});
modal.present();
global.scss
.backTransparent {
--background: transparent !important;
}
I'm using the following code to resize the images... Basically, I would be swapping out the image as the screen sizes shrinks or gets wider. I was wondering if this is the right approach and what size images would I have to use for each breakpoint in the media queries?
Here is a snippet of my CSS code for the background image. BTW... I'm using "no-gutters" in bootstrap 4 to layout the site. But when the images get smaller they just show parts of the background. I want to either create a new image (resized) or have it shrink to display the proper background.
Any ideas of what size to resize the images to or how to shrink/expand them? The default starting image is 2000x1333px.
.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) no-repeat center center fixed;
height: 1333px;
}
#media only screen and (max-width: 1024px) and (orientation:landscape) {
.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) 50% 0 no-repeat center center fixed !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
.landpage-img {
background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
.landpage-img {
background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
background-size: auto !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
I need to use an image as table background (as entire row background will works).
I tried this:
.cellTableOddRow {
background-image: url(image.jpg);
background-repeat: repeat-y;
width: 300px;
}
but it puts the image in each cell.
Is this possible?
Thx a lot!
It was really simple:
The image should be in 'cellTableWidget'
.cellTableWidget {
background-image: url(../img/bgtablas.jpg);
background-repeat: repeat-y;
width: 300px;
}
and the row must to 'delete' its style:
.cellTableOddRow {
background: none;
background-image: none;
}
I use this meta-tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
And I have a text that has no width limit.
The text is breaking up into two lines in portrait orientation, and when I rotate the device the text is scaled up: instead of keeping the same size and using the available space and placing the text in one line, like it should, it zooms the text and the text is still taking the two lines.
Why is that?
the CSS (compiled from SASS):
.text {color: #dee3d5; font-size: 16px; font-family: Helvetica; font-weight: bold; }
#media screen and (orientation:portrait) {
.text { margin-top: 10px; margin-bottom: 10px; line-height: 20px; } }
#media screen and (orientation:landscape) {
.text { margin-top: 5px; margin-bottom: 5px; line-height: 16px; } }
#thanx { border-bottom: solid 2px #dee3d5; padding: 10px; margin: 0 10px 12px 10px; }
You can disable this behavior by using -webkit-text-size-adjust: none;.
body {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}