html - how to accomplish this border effect in css? -
fiddle:
https://jsfiddle.net/aronlilland/bsml1kx7/
for many moons have been trying find out how make following border effect around elements in css, borders between each line item "signature serveice". "facebook monitor" etc. can acheive spacing div row 1px appart 1 below it? or how best accomplish this? me seems there light color edge border around each shape, simple question, simple answer
thank you!
.table { background: #1e2129; width: 375px; } .row1 { width: 100%; line-height: 100px; background: #272a34; margin-bottom: 1px; text-align: center; color: #fff; font-family: helvetica; } .row2 { width: 100%; line-height: 100px; background: #313641; margin-bottom: 1px; text-align: center; color: #fff; font-family: helvetica; }
looks me have lighter border @ top , darker border @ bottom. nothing fancy. didn't match colors exactly, idea:
article { border-radius: 20px; background-color: #44ccff; color: white; } article header, article section div { background-color: #445; } article section div:nth-child(odd) { background-color: #333344; } article section div { border-top: 2px solid #556; border-bottom: 2px solid #223; } <article> <h2>starterpackage</h2> <header>here can type...</header> <section> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> </section> </article> 
Comments
Post a Comment