- Css hover effects exept table header code#
- Css hover effects exept table header zip#
- Css hover effects exept table header free#
You can now also achieve this effect in CSS for all the modern browsers. This is especially great if you have a large table that gets updated frequently. This CSS table uses Javascript to automatically alternate row colors. CSS Table with Automatically Alternating Rows (Requires Javascript) It's not pixel perfect in Internet Explorer 7 or 8 but it's a good enough rendering and doesn't impare legibility.įilter: progid:( startColorstr='#d5e3e4', endColorstr='#b3c8cc',GradientType=0 ) įilter: progid:( startColorstr='#ebecda', endColorstr='#ceceb7',GradientType=0 ) īackground: url(data:image/svg+xml base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw元N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZTNlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2NjZGVlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2M4Y2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) īackground: -moz-linear-gradient(top, #d5e3e4 0%, #ccdee0 40%, #b3c8cc 100%) īackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5e3e4), color-stop(40%,#ccdee0), color-stop(100%,#b3c8cc)) īackground: -webkit-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%) īackground: -o-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%) īackground: -ms-linear-gradient(top, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%) īackground: linear-gradient(to bottom, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%) īackground: url(data:image/svg+xml base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw元N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWNkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2UwZTBjNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) īackground: -moz-linear-gradient(top, #ebecda 0%, #e0e0c6 40%, #ceceb7 100%) īackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebecda), color-stop(40%,#e0e0c6), color-stop(100%,#ceceb7)) īackground: -webkit-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%) īackground: -o-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%) īackground: -ms-linear-gradient(top, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%) īackground: linear-gradient(to bottom, #ebecda 0%,#e0e0c6 40%,#ceceb7 100%) Ĥ.
Css hover effects exept table header code#
This code will display correctly across all modern browsers even Internet Explorer 9.
Css hover effects exept table header free#
It's a completely image free table rendering. This one is a more modern version of the image one - it uses CSS gradients to achieve the bevelled look of the image table example. Remember to change the css image location.
Or right click and save these two images to your desktop: cell-blue.jpg and cell-grey.jpg
Css hover effects exept table header zip#
Download a zip of the table images (code included) You'll probably have to make two small changes to the CSS to reflect where the table images live on your server other than that it's fairly straightforward.
The images also have a one pixel white line on the left and top which gives the cells a slight 3D effect. This table is similar to the one above except it uses background images which allows the table cells to have a subtle color gradation in them. If you're looking for a more modern approach, then check out the CSS Table Gradient example below. This image approach is a little old school but it may still come in handy once in a while. Info Header 1Ĭopy/Paste Code for CSS Table with One Pixel Borders The code includes the CSS which you can add to your stylesheet and please note a class has been added to the table tag. First up is the collapsed border table that has the solid line borders making this the basis for most popular table styles.
0 kommentar(er)
