I would like to replicate the down arrow that appears next to a username on several sites such as Twitter.
I believe there are two ways of doing this: create a down arrow image and set it as some sort of background image, or use CSS to create the arrow. I believe Google uses the CSS approach for their top bar.
Which option is preferred and how would I go about doing it?
Twitter is using the ↓ html entity (appending it with css content property). In combination with an image sprite, see here: http://jsfiddle.net/HAZGr/
My advice would be to use an image, it keeps it simple and that way you know it will look the same on all browsers.
http://jqueryui.com/themeroller/
This is how I do it. JQuery is the holy grail of web design.
You can't do it directly with CSS (there are border hacks to create shapes that look like triangles, etc but I don't recommend them).
Instead an approach used now, by google, twitter, etc is to have an image that contains all the little icons, load that once, and offset the image using:
background-image: url("sprite-icons.png");
background-position: -176px -96px;
height: 14px;
width: 14px;
Related
I am a photographer and currently attempting to upgrade my site from a Portfolio of my images to a fully functional E-Commerce site.
I have gotten my head around most of the WooCommerce type things I need to do, and I have an idea of what I want. I feel like I can achieve pretty much what I want.
The big problem I'm having is dynamically picture framing my images for sale.
Some examples of what I want:
https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
https://kenduncan.com/product/docklands-melbourne-vic-vx2101/
Just the ability for me to make a .PNG frame, and have it dynamically added to the background of my images as the variations are selected.
I'm reasonably sure it's a simple coding thing, but I have 0 experience coding.
Any help would be awesome! I couldn't see a simple plugin to do what I want, and I couldn't really see any existing plugin or theme that would add this functionality.
Dan
You don't need to edit the images directly, and I don't recommend it because it requires a lot more work. CSS does the trick!
Since you said you are using woocommerce, I have targeted below the default woocommerce image in the gallery on the single product page.
This is a very basic picture frame - and you can make it a lot cooler if you want it to be (such as a matte)!
.woocommerce-product-gallery__image img {
border: 15px solid #666;
padding: 10px;
}
Add this code to your theme's custom CSS field.
For something like this https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
You will need some javascript.
Upload the frame png and all frame variations to your WordPress site.
Give your image class padding of variable size.
In the JavaScript code, replace the background image of your image element. Make sure your background is set to no-repeat.
Some CSS tweaking might be needed to get it to look exactly how you want.
For e.g. I have 4 thumbnails and 1 large image. When I click on a thumbnail, the larger image changes to that thumbnail picture.
I thought there might be a value to place inside target=""?
I was hoping to use only html/css as I don't know other languages well but any solution would be great I've tried looking everywhere.
A couple of possible solutions:
Pure HTML: Use an <iframe> with a name to contain the larger image, and embed the thumbnail images in <a>s with the appropriate target and href
Pure CSS: Include all 4 pictures, with display: none set, and display: block within a rule with the :target pseudo class, and each with an id. Embed the thumbnail images in <a>s with href=#id.
Then there are of course the Javascript/jQuery solutions.
This will give you the answer you need. There is some JavaScript but it's very basic.
Simple Image Swap
Is there a way to make a HTML5 video (and the poster attribute) to act like a centered background cover?
I've created a dummy pen you can play around width:
http://codepen.io/SEFarstad/pen/vujqE
The layout is based on two 50% width sections, where the left one will contain the fixed video and the right one will containt the absolute positioned content.
The main problem is that my design needs to be split vertically, making horizontal videos an issue. Is there a way to make these horizontal videos full height in a vertically based layout it like this? -in the same manner as you use background-size: cover;
I know you can use background videos etc but I need this to have controls, posters and so on to meet some interactivity demands I have on this project.
I know this is an old question and you've probably moved on to other things, but I wanted to answer just in case anybody else stumbles on to this via Google. What you were looking for was object-fit, a way to add that kind of behavior to videos and images. Here's some info on it, but basically you just need to write it like this:
video {
... // other stuff here
object-fit: cover;
}
Sadly, you can't use this on every browser just yet. However, there's a polyfill you can look into.
I am trying to implement a full page background image as discussed here.
I am using the first method, the CSS3 technique. However, when I use background-size: cover like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.
Is it a problem with the size of the image or do I have something else wrong?
Here is a link to the page.
achievable I want to see the entire tree, trunk and all. I've already tried setting the background-size to "100% auto" and the effect is the same. I've also already tried background-size to "contain" and now the image is too small.
No JavaScript solutions please. I know this achievable with just CSS.
UPDATE
Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?
UPDATE
I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices.
I believe we can suffice this requirement by using following two Solutions:
a. Use background-size:100% 100%; I am able to zoom image properly by using this Solution.
b. Use img tag with height and width as 100%
Change background-size: cover to background-size: contain
It looks perfect this way!
I've just started using CSS spritesheets to significantly reduce the number of requests a user makes on our webserver (previously I had designed a page with 200 thumbnails, each linked separately, so that was 200 requests just for those and didn't know it was an issue until someone told me about it)
After going through w3schools I have figured out how to use it and have downloaded spritesheetpacker to help me make the spritesheet as well as give me the dimensions and offsets.
Now I have a CSS file that's extremely long, and am not looking forward to tagging 200 HTML elements manually. Is there a different way to deal with this situation? Here are some details:
I am familiar with javascript (not much JQuery though)
I have all of the dimensions and offsets for the images from the packer.
The page contains a table with a column for thumbnails, and another column with a link to the file associated with it, so people can quickly scroll through the page and pick what they want. You can also click on the thumbnail to see a full-size picture
I am currently displaying the image using the img tag and wrapping them with anchors, where the img class is just the picture filename (since it is also included with the output from the packer)
You can save a bit of CSS by grouping things together with similar dimensions and then just coding the background images.
<a class="buttonA Image5"></a>
.buttonA {
width:100px;
height:30px;
display:block;
}
.image5 {
background-image:url(...);
background-position:....
}
If you use display:block on your anchors, you can use a CSS background on it and eliminate the image tag completely.