StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS oval shape cut out from div
primarykey
Id
18830868
data
AcceptedAnswerId
18853833
AnswerCount
5
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2013-09-16T14:45:03.810
FavoriteCount
1
LastActivityDate
2016-02-18T13:11:17.480
LastEditDate
2016-02-18T13:11:17.480
LastEditorUserId
2106711
OwnerUserId
2106711
ParentId
0
PostTypeId
1
Score
6
ViewCount
6104
LastEditorDisplayName
text
Body
<img src="https://i.stack.imgur.com/telOf.jpg" alt="goal"> The above image is what i'm trying to create but am having some difficulties with the oval shape. An explanation: <ul> <li>The menu bar is a div with a slight linear gradient (dark grey to transparent lighter grey)</li> <li>The company logo image has a transparent bg and will sit 'ontop' of the menu bar</li> <li>The oval cutout will need to match the oval of the logo and have a transparent gap between that will show the background colour (this changes on each page, orange is just an example)</li> </ul> I've tried and failed many times with a radial gradient - I was able to get a circle cut out but couldn't work out how to make it oval and then couldn't get the linear gradient to work. See code: <pre><code>.circle { height: 10em; background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px); background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px); } </code></pre> When the cutout shape and the gradient is sorted, the logo will be positioned over the top. Any suggestions or jsfiddle solutions would be appreciated, thanks! EDIT: jsfiddle <a href="http://jsfiddle.net/JazParkyn/fZWM4/" rel="nofollow noreferrer">here</a> EDIT 2: Have solved the problem by changing the design slightly, thanks to those who replied. I wrote some jquery to solve this - when the coloured area scrolls out of view the oval border and header border will pick up the colour of the top section, instead of the transparency. <img src="https://i.stack.imgur.com/oDiVw.png" alt="enter image description here">
Tags
<jquery><html><css><css3><css-shapes>
Title
CSS oval shape cut out from div
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USJaz Parkyn
UserOwnerUserId
1. USJaz Parkyn
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POCSS oval shape cut out from div
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POCSS oval shape cut out from div
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 POCSS oval shape cut out from div
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.