Ribbon with a "3D" Effect

Ribbon with a 3D effect

You can use borders on pseudo elements to make the 2 darker triangles on the top left and right of your menu bar.

To make the menu bar wider than it's container, you can use negative left/right margins :

DEMO

header{

    width:80%;

    margin: 0 auto;

    background:#D3D3D3;

    padding:100px 0 200px;

}

nav{

    position:relative;

    height:50px;

    background: #7E7979;

    margin: 0 -25px;

}

nav:before, nav:after{

    content:'';

    position:absolute;

    top:-10px;

    border-bottom:10px dotted #5C5C5B;

}

nav:before{

    left:0;

    border-left:25px solid transparent;

}

nav:after{

    right:0;

    border-right:25px solid transparent;

}

<header>

    <nav></nav>

</header>

How to create 3d ribbon box in css

Here's one way to do it, pretty minimal markup. :before and :after pseudo-elements require IE 8+, if you need to support lower (IE6/7) you could use two extra <div> elements for the triangle corners.

example jsfiddle

HTML:

<div id="box">
    <div id="ribbon">3d Text and rounded corner sample</div>
</div>​

CSS:

#box {
    position:relative;
    background:gray;
    width:400px;
    height:300px;
    margin:20px 45px;
}
#ribbon {
    position:absolute;
    top:15px;
    left:-20px;
    width:360px;
    height:55px;
    background:#ff2702;
    color:white;
    padding:20px 40px;
    font-size:24px;
    font-weight:bold;
    border-radius:5px 5px 0 0;
    box-shadow:0 0 8px #333;
    text-shadow:0 0 8px #000;
}
#ribbon:before {
    content:'';
    position:absolute;
    bottom:-20px;
    left:0;
    border-top:solid 10px #ff2702;
    border-right:solid 10px #ff2702;
    border-bottom:solid 10px transparent;
    border-left:solid 10px transparent;
}
#ribbon:after {
    content:'';
    position:absolute;
    bottom:-20px;
    right:0;
    border-top:solid 10px #ff2702;
    border-right:solid 10px transparent;
    border-bottom:solid 10px transparent;
    border-left:solid 10px #ff2702;
}
​

Unity animated ribbon effect

Tiziano is right. You can use Procedural but I think that is complicated. If you are advanced then you can do that.

There is an easier way to do this like you asked. It is called LineRenderer
You need to learn Coroutine first, then animate the LineRenderer by moving the position of the LineRenderer's points in coroutine. This is the easiest way of doing this in unity.

If you look at the video below at 0:27, you will see what LineRenderer can do.
https://youtu.be/9hE7-rGg7Tg?t=27

Learn about animating with LineRenderer
https://www.youtube.com/watch?v=Bqcu94VuVOI

How to plot 3D path data as a ribbon in Matlab

The ribbon function can only accept 2D inputs because it uses the 3rd dimension to 'build' the ribbon.

One way to achieve a 3D ribbon is to build series of patch or surface between each point and orient them properly so they look continuous.

The following code will build a ribbon around any arbitrary 3D path defined by an (x,y,z) vector. I will not explain each line of the code but there are plenty of comments and I stopped for intermediate visualisations so you can understand how it is constructed.

%% Input data
a=1; c=1; t=0:.1:100;
x = (a*t/2*pi*c).*sin(t);
y = (a*t/2*pi*c).*cos(t);
z = t/(2*pi*c);

nPts = numel(x) ;

%% display 3D path only
figure;
h.line = plot3(x,y,z,'k','linewidth',2,'Marker','none');
hold on
xlabel('X')
ylabel('Y')
zlabel('Z')

%% Define options
width = ones(size(x)) * .4 ;

% define surface and patch display options (FaceAlpha etc ...), for later
surfoptions  = {'FaceAlpha',0.8 , 'EdgeColor','k' , 'EdgeAlpha',0.8 , 'DiffuseStrength',1 , 'AmbientStrength',1 } ;

%% get the gradient at each point of the curve
Gx = diff([x,x(1)]).' ;
Gy = diff([y,y(1)]).' ;
Gz = diff([z,z(1)]).' ;
% get the middle gradient between 2 segments (optional, just for better rendering if low number of points)
G = [ (Gx+circshift(Gx,1))./2 (Gy+circshift(Gy,1))./2 (Gz+circshift(Gz,1))./2] ;

%% get the angles (azimuth, elevation) of each plane normal to the curve

ux = [1 0 0] ;
uy = [0 1 0] ;
uz = [0 0 1] ;

for k = nPts:-1:1 % running the loop in reverse does automatic preallocation
    a = G(k,:) ./ norm(G(k,:)) ;
    angx(k) =  atan2( norm(cross(a,ux)) , dot(a,ux))  ;
    angy(k) =  atan2( norm(cross(a,uy)) , dot(a,uy))  ;
    angz(k) =  atan2( norm(cross(a,uz)) , dot(a,uz))  ;
    
    [az(k),el(k)] = cart2sph( a(1) , a(2) , a(3) ) ;
end
% compensate for poor choice of initial cross section plane
az = az + pi/2 ; 
el = pi/2 - el ;

%% define basic ribbon element
npRib = 2 ;
xd = [ 0 0] ;
yd = [-1 1] ;
zd = [ 0 0] ;

%% Generate coordinates for each cross section

cRibX = zeros( nPts , npRib ) ;
cRibY = zeros( nPts , npRib ) ;
cRibZ = zeros( nPts , npRib ) ;
cRibC = zeros( nPts , npRib ) ;

for ip = 1:nPts
    % cross section coordinates.
    csTemp = [ ( width(ip) .* xd )  ; ... %// X coordinates
               ( width(ip) .* yd )  ; ... %// Y coordinates
                               zd    ] ;   %// Z coordinates
    
    %// rotate the cross section (around X axis, around origin)
    elev = el(ip) ;
    Rmat = [ 1     0           0     ; ...
             0 cos(elev)  -sin(elev) ; ...
             0 sin(elev)   cos(elev) ] ;
    csTemp = Rmat * csTemp ;
    
    %// do the same again to orient the azimuth (around Z axis)
    azi = az(ip) ;
    Rmat = [ cos(azi)  -sin(azi) 0 ; ...
             sin(azi)   cos(azi) 0 ; ...
               0            0    1 ] ;
    csTemp = Rmat * csTemp ;
    
    %// translate each cross section where it should be and store in global coordinate vector
    cRibX(ip,:) = csTemp(1,:) + x(ip) ;
    cRibY(ip,:) = csTemp(2,:) + y(ip) ;
    cRibZ(ip,:) = csTemp(3,:) + z(ip) ;
end

%% Display the full ribbon
hd.cyl = surf( cRibX , cRibY , cRibZ , cRibC ) ;
set( hd.cyl , surfoptions{:} )

Now you have your graphic object contained in one surface object, you can set the options for the final rendering. For example (only an example, explore the surface object properties to find all te possibilities).

%% Final render
h.line.Visible = 'off' ;
surfoptionsfinal  = {'FaceAlpha',0.8 , 'EdgeColor','none' , 'DiffuseStrength',1 , 'AmbientStrength',1 } ;
set( hd.cyl , surfoptionsfinal{:} )
axis off

---

Note that this code is an adaptation (simplification) of the code provided in this answer (to that question: Matlab: “X-Ray” plot line through patch).

This method allows to draw an arbitrary cross section (a disc in the answer) and build a surface which will follow a path. For your question I replaced the disc cross section by a simple line. You could also replace it with any arbitrary cross section (a disc, a square, a potatoid ... the sky is the limit).

---

Edit

Alternative Method:

Well it turns out there is a Matlab function which can do that. I first discarded it because it is meant for 3D volume visualisations, and most ways to call it require gridded input (meshgrid style). Luckily for us, there is also a calling syntax which can work with your data.

% Same input data
a=1; c=1; t=0:.1:100;
x = (a*t/2*pi*c).*sin(t);
y = (a*t/2*pi*c).*cos(t);
z = t/(2*pi*c);

% Define vertices (and place in cell array)
verts = {[x.',y.',z.']};
% Define "twistangle". We do not need to twist it in that direction but the
% function needs this input so filling it with '0'
twistangle = {zeros(size(x.'))} ;
% call 'streamribbon', the 3rd argument is the width of the ribbon.
hs = streamribbon(verts,tw,0.4) ;

% improve rendering
view(25,9)
axis off
shading interp;
camlight
lighting gouraud

Will render the following figure:

For additional graphic control (over the edges of the ribbon), you can refer to this question and my answer: MATLAB streamribbon edge color

Ribbon in css3 that goes from side to side

It looks like you're missing the ribbon CSS class, which is necessary for the other classes to work:

.ribbon{
    color: #fff;
    margin: 30px 0 50px;
    position: relative;
    text-transform: uppercase;
    background: rgb(0, 164, 239);
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: 0px 1px 3px rgba(0,0,0,.2);
    padding: 10px 15px;
    clear: both;
}

Using OpenGL ES, how can I draw a flat ribbon (quad) in 3D space whose ends are always parallel to the viewing plane?

I would start with a rectangle with the length of the line and the width you desire and perform a
orthogonal projection

but that's me.

Or you could take any line from your plane (camera). And your line segment. These two can be used to form a new plane. Then calculate the normal of this new plane. This will be perpendicular to both your line and your plane. I think that is what you're looking for.

Ribbon heading without extending scrolling area

OK, I found a solution that looks fine for me in this thread: https://stackoverflow.com/a/2650215/2084434 (answer by Nikolaos Dimopoulos)

Wrapping the whole content in another div and applying

#wrapper {
    width: 100%;
    overflow: hidden;
    min-width: 200px;
}

works OK.
Here's the updated fiddle: http://jsfiddle.net/jJaxp/2/

Corner design in css

Use a couple of pseudo elements and create triangles with their borders then position them absolutely to sit where you want.

More information on pseudo elements

EXAMPLE

div{

    background:#999;

    height:300px;

    position:relative;

    width:100px;

}

div::before,div::after{

    content:"";

    left:100px;

    position:absolute;

}

div::before{

    border-bottom:20px solid #333;

 border-right:20px solid transparent;

    top:0;

}

div::after{

    border-top:20px solid #333;

 border-right:20px solid transparent;

    bottom:0;

}

<div></div>

---

Related Topics