CSS masters please...

  • Started
  • Last post
  • 24 Responses
  • dee-dubs

    Can anyone explain to me what I need to add or remove my css:

    https://codepen.io/anon/pen/rrZw…

    works fine on rollovers/rollouts using CSS transitions and delays..However when you click on it, the rollover state is preserved and then when you come back to the page it is stuck in hover state and does ugly transition back when you focus (not respecting delays etc)

    can I make it just flip to non-rolled over state on click (In CSS only)???

  • sted0

    add .workLink:focus
    sanme as .workLink or whatever you want to do with it

    • same :psted
    • But isn't focus is the issue to start with. That is why it's stuck on click. It should be pure hover event, should it not?ETM
    • yes it isn't but the solution for the problem.
      simply check out adding the .workLink css you'll see.
      sted
    • I did... and it doesn't work. When I click back to the test page the OP's problem still exists.ETM
    • add the focus after all elements. and it works.sted
  • sausages0

    ^ < If you run into any more issues, here is a list of the pseudo classes: http://www.w3schools.com/css/css…

  • ESKEMA0

    I dont think you can achieve what you want with css only without compromising the rollover / rollout animation.

    example:
    https://codepen.io/anon/pen/NRNv…

    having the transitions / animations whatever only on the hover state, you get the normal link coming back to the page, BUT, you also don't have rollout.

    P.S. I modified the code to only use one ::before

  • ETM0

    I think you'll require a little jquery or JS to add/remove a class, rather than all via pseudos. You can still use pure CSS for the actual transition itself.

  • _niko9

  • dee-dubs0

    Thanks for the suggestions guys

    I thought 'focus' was different from being clicked ('active'). ie. bringing a button/link into focus is not the same as actually clicking it (although both would bring it into focus) - like tabbing to select link would bring it into 'focus' before clicking which would make it 'active'...

    maybe i do need to add some JS to just reset it all on click.

    • you are correct - e.g. a form element is in focus when being used after tabbing.fadein11
    • they are different, but clicking with a mouse they become basically the same. For other input methods, they're not.ESKEMA
    • With JS, you could just delay the link action, let it come back to normal state and then open the link.. something like this:
      http://stackoverflow…
      ESKEMA
    • you only need like .2s delay or whatever it takes to gret back to normal stateESKEMA
    • On click Im happy for it to snap back.. but roll off I prefer animation back as looks smootherdee-dubs
  • oey1

    I'm working on my first website for a client and encountered a problem and haven't been able to solve it:

    Can't center Facebook iFrame and when I reduce the display size it cuts the iFrame to fit in a window.

    Something else, I use Brackets and in the live preview the iFrame always appears but after I uploaded the files the iFrame doesn't show in Firefox only.

    Went through StackOverflow and couldn't find any solution.

    I guess it's relatively simple to explain/solve and maybe it's my css that's too complicated for something so simple.

    Could someone please help?

    http://arminmetz.com/pages/event…

    • The width of you iframe isn't the same as the <div class="_2p3a" style="
      min-width: 180px;
      width: 500px;">
      BabySnakes
    • give your iframe a width of 500pxBabySnakes
    • Hey thanks, but I'm not sure if I understood. <div class="_2p3a" where is that?oey
    • should I give the with in the HTML part of the iFrame or in the css? cause the iFrame has the width set to 560oey
    • ah! you used inspector or some other dev tool in the browser, right?oey
    • in CSS, line 106, change 600px to 500px.ESKEMA
    • ESKEMA LIVES...muahahaha! Thanks!oey
    • Thanks again! Obrigado!oey
  • oey0

    Cool, much better.
    Many thanks!

    Need some details in the vertical alignment of nav bar cause in mobile portrait it moves a bit down in the Events page and the space between the nav and the footer is different but I can show it to the client tomorrow.

    I'm quiet happy so far. Client wanted Wordpress and I told him it was not necessary for his needs.

    And he wants it as simple as possible.

    http://arminmetz.com/

    • You should be more noisy happy.Maaku
    • how do you mean more noisy? it's a very simple thing no? still needs two sort two thihs out and wait for the feedback. you mean i should lite some fireworks?oey
    • :)oey
    • Armin is a good bass player - just wasted an hour going through youtubesausages
    • true to that sausages. he's also one of my 70 housemates.oey
    • Can't remember why I said that oey, lol.Maaku
  • imbecile2

  • mg330

    Trying to figure something out and unfortunately stumped.

    I want to have the header shown below fixed on the page so it doesn't scroll. I then want the text below it to scroll on page scroll, but disappear once it hits that div containing the header. I've been messing with overflow, setting a fixed height, etc.

    I've been messing around with this here: https://codepen.io/mgee/pen/xmxy…

    - header should remain fixed
    - text should scroll and disappear behind header as it scrolls upwards
    - scrolling anywhere on the page should scroll that content - no scroll bar for that text section as used in overflow:scroll.

    Can anyone offer a hand with this?

    • you can't have events with css. To achieve that you would need js. Bootstrap has something called "affix", which is the easiest way to get that up and running.mekk
    • another solution would be to have the title fixed and the text overlapping it (same as you have it right now, just with background for text)mekk
    • https://codepen.io/a…sted
    • Not sure quite what you mean... not this?

      https://codepen.io/a…
      kingsteven
    • https://codepen.io/p…mekk
    • ah thats nice one mekk :)sted
    • oh, i think i see what you're doing with the background image... you can maybe try background-attachmen... ??

      https://codepen.io/a…
      kingsteven
    • * background - attachment : fixed;

      tidier version:
      https://codepen.io/a…
      kingsteven
    • keep in mind it will only work with one heading/text. all fixed elements with top: 0; are on top of each other.mekk
    • Whoa! Damn, thanks for all the quick responses.mg33
    • kingsteven - that's exactly what I needed. Thank you!mg33
    • Actually... now that I look more, that white background on the fixed header is how it's doing it. I need it to be transparent and the scroll disappear behind itmg33
    • background-color: rgba(255,255,255,.5...mekk
  • sted0

    what you want to do with the scroll exactly?

    https://codepen.io/anon/pen/pqvE…

    • The text should scroll up and down, but when it hits the bottom of the div containing the heading (no bg on this div; it's transparent) text should cut off.mg33
    • In the image, TITLE and text are above a video background. I want TITLE to remain fixed, and text (or anything in those divs) to scroll, but disappearmg33
    • as soon as it hits the bottom of the TITLE div (which has no background color)mg33
    • yeah refresh this pen pls.
      you can fake the background with a double but not with a video :(
      that hurts :D
      sted
  • mg330

    So, taking this a step further, this is what I really want to pull off. And, I'm working on this within a really robust Wordpress theme, I'm just wondering if I'm better off custom building it.

    - full cover video, looping in background
    - title and nav in fixed position, and flex with the browser changing size.
    - anything below the nav scrolls upward on page scroll, but disappears as soon as it hits that nav / title div.

    • not sure if the text can arbitrarily disappear but still be page scrolling, and a full pg video bg makes it even more difficultcolin_s
    • All is possible, but depending on the theme you will most likely run into issues. I would build it from scratch.wordssssss
    • if the looping video background stays dark, use a linear gradient from video-dark to transparent as background for the fixed stuff.uan
    • here are three good approaches to try: https://css-tricks.c…
      background-clip, SVG text, CSS blend modes
      monNom
  • sted3

    mg look at this:

    scrollbar still sucks at that position

    here is the sauce:
    https://codepen.io/anon/pen/qLEp…

    • it would be possible to get the scrollbar to the right side of that section, but it's fiddly fo sure.kingsteven
  • mg330

    Howdy and happy new year!

    Are any of you familiar with how to set a transparent background for a div that overlays something else in Safari?

    I'm driving myself crazy trying to find a solution to a div that is displayed above a fixed background video (continuation of what I posted below) and transparent or gradient backgrounds work in Firefox and Chrome, but not in Safari. I can share something later if I change a few things on the site, but anyone know what the secret is?

    • imo, it *shouldn't* matter, if you're just using divs and video tags, so might it be a z-index issue?Nairn
    • post a linkdbloc
    • Just made the page live. http://mg33.com/musi…mg33
    • Firefox and Chrome work and display the slight black to transparent gradient just fine as you scroll. Safari displays white for the transparency.mg33
    • There's a second page with a non gradient, black background for the scrolling section: http://mg33.com/musi… - I just don't want to use this.mg33
    • I like the black > transparent gradient, and it works in all but Safari. It's really making me mad. :(mg33
    • just use a 5pixel wide transparent black gradient png filling the whole container. May not be the best solution but will work cross browser. Visual Composerfadein11
    • often throws up issues like this, it's often how you nest your rows etc.
      Obviously set the the narrow PNG to repeat-x and it doesn't have to be 5 pixels wide
      fadein11
    • but needs to be small file size. Obviously make sure it's the correct height or set it's size to :cover;fadein11
    • fadein11 - Thank you. Big question: Can the height of that gradient scale? Should I use it as a bg for a portion then CSS black for anything longer than that?mg33
    • 'better' to have a slightly bigger png than slow down the rendering by having too small an image repeat too much mind!Nairn
    • if you use background-size: cover; it wo';t repeat and will fill the space of the container regardless of size, but good idea to make it near the size requiredfadein11
    • as the gradient will look ropey otherwise.fadein11
    • won't*fadein11
    • cover will work across devices as it will scale but you could use repeat-x and a correctish height image for device with media queries.fadein11
    • as I said this may not be the best method but it will work and may save hours of trying to debug a quirk in Visual Comp and CSS gradients.fadein11
  • mg330

    Bump for nairn and dbloc

  • evilpeacock0

    So... Safari/Webkit should be fine with web gradients and transparency — I've used those going back years. And your gradient works in Safari on the generator called out in your source: http://www.colorzilla.com/gradie…

    The gradient CSS declaration appears correct, but there is a white fill being applied to the content underneath it. If I remove all the gradient styles there is white above the video in Safari, so the gradient itself isn't the issue. More than likely a default fill is applied or there are z-index issues and you would need to clean up or get more specific with your CSS assignments, e.g. make sure that all other elements are transparent as well as the gradient. There is a white fill applied to the parent class ".vc_column-inner" that Chrome ignores, but Safari does not. That class is in one of the *13* stylesheets used (probably a Bootstrap default). If that's the only cause then this is a relatively easy CSS specitivity fix by overriding conflicting framework styles in your custom page styles.

    And you're applying styles on the same .contentbg element multiple times, overriding one gradient with another and there are lots of code errors here. One issue is that "//" isn't how you comment out CSS (that's Javascript). CSS comments are bracketed by "/*" and "*/".

    The code errors are enough to cause CSS parsing errors on the page which could mean that Safari might be showing the *true* result of your invalid syntax — not all browsers are as strict about this sort of thing, hence the continued need for "web standards". This is actually a good thing when one browser shows that you need to beef up your code to a higher standard.

    As you finalize your page you're going to want to clear up as much syntax validation as you can to eliminate display voodoo. I've fixed huge, expensive corporate web sites with a five minute validation process that flagged bad syntax causing a mis-parsed CSS declaration which in turn rendered the page badly on some browsers (while on a conference call with 15 or so engineers listening in). These days with all the automated code there is actually quite a lot of this sort of thing in CMS's and other off-the-shelf web systems.

    The CSS validation errors can be seen here: https://validator.w3.org/unicorn…

    • Thank you! :)mg33
    • lol its here: https://codepen.io/a…sted
    • you're using visual composer with applied styles. it is recommended to export these styles to external css and give proper selectors like you're doing withsted
    • contentbg.sted
    • so its easier to give it just a blank div and add the gradient bg to that with the proper z-index.sted
    • It's weird, when you reload the page in Safari, you can see the transparency working for a split second, then the white shows up, even w/out contentbg cssmg33
    • It's definitely something in the js.composer css! :) Now to just isolate whatever it is. When I kill all that CSS in inspector, the white bg goes away.mg33
  • sted2
    • Thank you sted. I'm going to give this another round of troubleshooting and if I can't get it by the weekend, I'm going to find a decent alternate option.mg33
    • yeah i'm glad you aren't giving up.
      it feels good to just look at whats already done :) (i think its the bg video :)
      sted
    • When I tried adding gradients to the video, and using HTML color below in the solid area, it just didn't look right.mg33
  • mg330

    evilpeacock,

    Many thanks for your help! I spent some time going through other CSS files, and it was indeed an issue in the js_composer.css file, which (holy hell) was around 16,000+ lines long. I simply deleted section after section after section in Safari's dev tools until I eventually saw that white background go away, then narrowed down the issue to:

    .vc_row[data-vc-full-width] {
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
    overflow:hidden
    }

    It was overflow:hidden causing the issue. Switched to "none" flushed cache a few times, and problem solved. i think I'm going to have to keep this change in the actual js_composer file, which means if any theme updates take place I have to go back and modify it (an override with !important in my site css didn't work) and get it back to normal.

    Holy hell, I'm so happy I / we figured this out. More to come...

    • i kno its ugly but better than directly modding the parent theme or vc:
      !important or the visual composer custom style override wasn't working?
      sted
    • nice find anyhow :)sted
  • mg330

    Any of you CSS whiz men out there mind helping me figure out why mix-blend-mode of a background color above a video or photo works in Firefox, but not in Chrome or Safari?

    Oddly it works fine in Safari on mobile. No dice on Chrome or Safari. I currently have the green background color set to opacity:.8 so that you can at least see the video in the background, but it's using mix-blend-mode: multiply and it's only working in Firefox.

    http://mg33.com/music/home-augus…
    PW: agelesssea

    Any suggestions?

    • my Safari Desktop seems to show it correctly. For chrome i disabled the z-index: -99 on .nk-awb-overlay and it looks correct nowBabySnakes
    • maybe try not having both the overlay and inner on same z-indexBabySnakes
    • i think just giving .nk-awb .nk-awb-overlay a z-index: -1 will work for some reason it don't like 0BabySnakes
    • Double down on what Babysnakes says, seems to be a z-index issue between the color layer and the video layer.T-Dawg
  • mg330

    @ Babysnakes - thanks for the suggestions!

    I changed it as described ( .nk-awb and .nk-awb-overlay with z-index: -1. Had to put !important on both of them.

    The mix-blend mode with the green color works in Chrome now, but disappears once you've scrolled down past the first panel.

    In Safari the green color is gone completely now.

    • Whenever you have to use !important you really want to mean it and have absolutely no other way to solve the problem — otherwise it might make it worse.evilpeacock
    • Also, I'd never have two different elements have the same z-index because a browser won't necessarily know which of the elements is supposed to be on top.evilpeacock
    • Thanks. Some of this stuff is custom CSS within a theme, and it takes a little work to figure out the best place to put it.mg33
    • Definitely — it's not uncommon to randomly find bugs in JS libraries and themes. I usually run those through validators just to pinpoint possible issues.evilpeacock
    • All good now. :) Thanks guys.mg33